Essentially, the issue is that the drop down that's created with .ui.inline.dropdown is appearing beneath the rest of the fields in the code below it. Both of which are in an accordion.
My first instinct was to just give the drop down a high z-index and the inputs a lower z-index, but this doesn't appear to have any effect on the issue.
This is the html:
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Advanced
</div>
<div class="content">
<h4>
Results match
<div class="ui inline dropdown">
<div class="text">any</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-text="any">Any</div>
<div class="item" data-text="all">All</div>
<div class="item" data-text="none">None</div>
</div>
</div>
of the fields below.
</h4>
<div class="field">
<label for="firstName">Name</label>
<div class="two fields">
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="First Name">
</div>
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
...and this is how I'm initializing the drop down and accordion:
$( '.ui.accordion' ).accordion();
$( '.ui.dropdown' ).dropdown();
Related
I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on submit button all tabs content will save and in mysqli different tables can store information.
If any suggestions please write sample code for save the information with different tables also
<form>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Material Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#quote" data-toggle="tab" aria-expanded="true" class="nav-link active">
Quotes
</a>
</li>
<li class="nav-item">
<a href="#purchase" data-toggle="tab" aria-expanded="false" class="nav-link">
Purchases
</a>
</li>
<li class="nav-item">
<a href="#usage" data-toggle="tab" aria-expanded="false" class="nav-link">
Usage
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="quote">
<i class="mdi mdi-plus"><button type="button" class='addmore'>Add More</button></i>
<form id='students' method='post' name='students'>
<table border="1" cellspacing="0" class="table-responsive">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>S.No</th>
<th>Q.No</th>
<th>Item Name</th>
<th>Categories</th>
<th>Brand</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
<th>Quote Pic</th>
<th>Others</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td><span id='snum'>1</span></td>
<td><span id='qnum'>1</span></td>
<td><input type='text' id='item_name' name='item_name[]' /></td>
<td><input type='text' id='categories' name='categories[]' /></td>
<td><input type='text' id='brand' name='brand[]' /></td>
<td width="10%"><input type='text' id='qty' name='qty[]' /> </td>
<td width="10%"><input type='text' id='rate' name='rate[]' /></td>
<td width="10%"><input type='text' id='amount' name='amount[]' /> </td>
<td width="10%"><input type='text' id='qpic' name='qpic[]' /> </td>
<td width="10%"><input type='text' id='others' name='others[]' /> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<p>
</div>
<!--Quotes Div Close-->
<div class="tab-pane fade" id="purchase">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Q.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Itemname</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-5" class="control-label">Categories</label>
<input type="text" class="form-control" id="field-5" placeholder="categories">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Brand</label>
<input type="text" name="country" id="autocomplete-ajax" class="form-control" autocomplete="off">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-5" class="control-label">Rate</label>
<input type="text" class="form-control" id="field-5" placeholder="1234.00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-6" class="control-label">Amount</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Others</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
</div>
<!-- row-->
</div>
<!-- Purchase Div Close-->
<div class="tab-pane fade" id="usage">
<div class="row">
<!-- Inline Form -->
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"></h4>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S. No. </label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-5" class="control-label">Item Name </label>
<input type="text" class="form-control" id="field-5" placeholder="Item Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<!--row-->
</div>
<!--end card box-->
</div>
<!--end col-md-12-->
</div>
<!-- end row / End Inline form-->
</div>
<!-- Usage Div-->
</div>
<!-- Tab Content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Labour Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#inhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<!-- <li class="nav-item">
<a href="#scontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li> -->
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="inhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Category Of Labour</label>
<input type="text" class="form-control" id="field-4" placeholder="Mastrey">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Per Head Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Total Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
</div><!--row close-->
</div><!--card box close-->
</div><!--div md 12 close-->
</div><!-- end row / End Inline form-->
</div><!--in house tab close-->
</div><!--tab content-->
</div><!-- Close card-box -->
</div> <!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Work In Progress</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#winhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<li class="nav-item">
<a href="#wsubcontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="winhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
</div>
</div>
</div>
</div> <!-- end row / End Inline form-->
</div><!--winhouse close-->
<div class="tab-pane fade" id="wsubcontract">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="field-6" class="control-label">Notes </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-6" class="control-label">Upload Pics</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row / End Inline form-->
</div><!--wsubconant-->
</div><!--tab content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
</form>
here single form i have 3 divs and each div i have two or more tabs how can i store the all information with different databases
for example in material estimation div i have 3 tabs
1. Quotes
2. Purchase
3. Usage
in quotes tabs add new rows click add another row like no restrictions is there like purchases also
quotes data can store quotes table and purchase data can store purchase table usage data store in usage table
how i have only for single submit button for hole form and edit also add like
how is it is possible to make that one
if possible please write a code snippet and save to db
i have worked also ajax form not successfully so please if any one make code write for u s thank u
you can write in form action page look like this and also each and every field you can assign the name/id first then write form action page
if example i have taken one item
if(!empty($catlabours)) {
//your code
}
here is the code to reproduce the issue in bootstrap3.
what I want is to align the radio buttons below the center of the quiz title, while keeping text align left.
current title is inline flow by default bs3 sample form structure.
i'm thinking if using
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. might break the responsive flow. any suggestions how you balance responsive and align nicely ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>
I received some suggestions among below answers for making it appear like center aligned in bootstrap3, however I also found some pitfalls using the above method , listed in below picture I roughly made.
Both the Answer text in radio label and the Quiz Title text length are Variable, so this is the tricky part in this case to make it center aligned while keep responsive using css.
Add Some CSS
.radio{display:inline-block;}
Add Class radio parent div to col-xs-12 with text-center
Have you tried changing the class "col-xs-12" to "col-xs-8 col-xs-offset-4" to center it?
You can achieve this by wrapping all your radio button divs inside a parent div. And then placing this div accordingly to the device using offset.
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
Below is the working snippet. Have a check.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.
I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!
You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});
The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">
The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator.
I need some assistance in working out what aspect of CSS is affecting the behaviour.
Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<div class="row">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
<span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="description" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
<span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
<span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="assignee" class="col-lg-2 control-label">Assignee</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
<span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="targetDate" class="col-lg-2 control-label">Target Date</label>
<div class="col-lg-8">
<!-- <div class="col-lg-4"> -->
<div class="input-group">
<input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close">
</input>
<span class="input-group-btn">
<!-- " -->
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div> <!--input group -->
<!-- </div> /col-lg-4 -->
</div> <!--/col-lg-8 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div> <!--/col-lg-2 -->
</div>
</div>
<div>
<tt>name = {{vm.submitjobform.name}}</tt><br/>
<tt>desc = {{vm.submitjobform.description}}</tt><br/>
<tt>category = {{vm.submitjobform.category.name}}</tt><br/>
<tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
<tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
</div>
</form>
</div> <!-- content-user div -->
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div> <!-- widget violet -->
</div> <!-- row div -->
</div> <!-- container div -->
</section>
</section>
Thanks
Simon
http://jsfiddle.net/voykuL65/
I assume you're using bootstrap as you import it in your css on your fiddle.
The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.
Another point to remember is always design bootstrap smallest up.
You've got everything
class="col-lg-2"
You might have just been tinkering, but remember to start with xs/sm and move larger.
There is also a stray </input> Kill him as well.