Inline Form nested within Horizontal Form in Bootstrap 3
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Form inline inside a form horizontal in twitter bootstrap?
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
How can I give width to nested inline form elements with Bootstrap 3?
Your third row should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container"> ... <div class="form-group"> <label class="col-md-2 control-label">Tel. Celular</label> <div class="col-md-10"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label class="sr-only" for="cell_area_code">Cod. Area</label> <input type="text" class="form-control" id="cell_area_code" placeholder="Cod. Area" /> </div> </div> <div class="col-md-8"> <div class="form-group"> <label class="sr-only" for="cell_number">Número</label> <input type="text" class="form-control" id="cell_number" placeholder="Número"> </div> </div> </div> </div> </div> ...</div>Create vertical form elements inside an inline form in Bootstrap 3.3.6
This should help. It's not actually showing right on jsfiddle but try to copy the HTML and run local.
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container"> <form> <div class="row" id="row1"> <fieldset> <div class="row" id="main"> <div class="col-md-1"> <button class="form-control" id="1" class="remove_product" type="button"> <i class="fa fa-trash"></i> </button> </div> <div class="col-md-2"> <input type="text" class="form-control" placeholder="Variation"> </div> <div class="col-md-2"> <input type="text" class="form-control" placeholder="Unit Price"> </div> <div class="col-md-2"></div> <div class="col-md-2"> <button class="form-control" id="1" class="add_serial" type="button"> Add Serials </button> </div> <div class="col-md-3"> <div class="col-md-10"> <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> </div> <div class="col-md-1"> <a class="form-control remove_field" href="#"> D </a> </div> </div> </div> <div class="row" id="sub1"> <div class="col-md-3 pull-right"> <div class="col-md-10"> <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> </div> <div class="col-md-1"> <a class="form-control remove_field" href="#"> D </a> </div> </div> </div> <div class="row" id="sub1"> <div class="col-md-3 pull-right"> <div class="col-md-10"> <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> </div> <div class="col-md-1"> <a class="form-control remove_field" href="#"> D </a> </div> </div> </div> </fieldset> </div> </form></div>Twitter bootstrap mix horizontal form with inline
If you want to keep both within the same form element you can add form-inline to your fieldset:
<form>
<div class="row">
<fieldset class="form-inline">
<label class="control-label">A</label>
<input type="text" class="input-medium">
</fieldset>
</div><!-- end row -->
<div class="row">
<fieldset class="form-inline">
<label class="control-label">B</label>
<input type="text" class="input-mini" >
<label class="control-label">C</label>
<input type="text" class="input-mini" >
<label class="control-label">D</label>
<input type="text" class="input-mini" >
<label class="control-label">E</label>
<input type="text" class="input-mini" >
</fieldset>
</div><!-- end row -->
</form>
http://jsfiddle.net/ZWNjw/
How to create inline form for child records in horizontal main form with simple_form nested_form and bootstrap-sass Rails 4
Solved by myself by hardcoding inline class inside form, so I donot rely on Simple Form div generator (pasted just nested form with hardcoded solution):
<div class="form-inline">
<%= f.simple_fields_for(:cargo_items, @cargo_item) do |cargo_items_fields| %>
<%= cargo_items_fields.input :pieces, label: t('cargo_item.pieces'), input_html: { size: '3', type: "" } %>
<%= cargo_items_fields.input :length, label: t('cargo_item.length'), input_html: { size: '3', type: "" } %>
<%= cargo_items_fields.input :width , label: t('cargo_item.width'), input_html: { size: '3', type: "" } %>
<%= cargo_items_fields.input :height, label: t('cargo_item.height'), input_html: { size: '3', type: "" } %>
<%= cargo_items_fields.input :weight, label: t('cargo_item.weight_per_piece'), input_html: { size: '3', type: "" } %>
<%= cargo_items_fields.link_to_remove '', :confirm => t('cargo_item.remove_item_confirmation'), :class => "glyphicon glyphicon-remove" %>
<% end %>
<%= f.link_to_add '', :cargo_items, :class => "glyphicon glyphicon-plus" %>
</div>
inline rows within Bootstrap form
I finally got it working by using the 'form-inline' class for each row. This answer made me go back and look at form-inline again.
Here is my sample code:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-10">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="39">BH
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="11">CC
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</div>
</div>
</form>
Here is a codepen with the code above showing what it looks like.
Multiple horizontal nested form-rows
The problem is that your first column additionally has form-row on it, creating a row inside another row. There should never be a row inside a row; only use columns inside of rows. These rows add additional padding (15px for row, and 5px for form-row), which interferes with the percentage-based widths and offsets when you nest them.
Instead of nesting your second label + div inside of a new form-row, you need to take it out of its form-row, and place it inside of the form-row of the first label + div. After this, you'll need to adjust the col-md counts of both label+ div combinations to suit.
I've gone with 2 and 3 respectively, as that comes to a grand total of 10 ((2 + 3) + (2 + 3)), which equals the total of your second row (2 + 8).
I've created a fiddle showcasing this here, and you can also see this by maximising the snippet below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<form> <fieldset> <div class="form-row"> <label class="col-form-label col-md-2 col-sm-12">LABEL</label> <div class="col-md-3 col-sm-12"> <input type="text" class="form-control"> </div> <label class="col-form-label col-md-2 col-sm-12">LABEL</label> <div class="col-md-3 col-sm-12"> <input type="text" class="form-control"> </div> </div> <div class="form-row mt-2"> <label class="col-form-label col-md-2 col-sm-12">LABEL</label> <div class="col-md-8 col-sm-12"> <input type="text" class="form-control"> </div> </div> </fieldset></form>Related Topics
Equal Width Columns in CSS Grid
Force <A Download /> to Download Image Instead of Opening Url Link to Image
Overflow Behavior After Using CSS3 Transform
Alignment of Content Vertically in Adjacent Flexbox Containers
How to Horizontal & Vertical Center a Div
How to Hide Autofill Safari Icon in Input Field
Bootstrap Full-Width Text-Input Within Inline-Form
How to Align Text Directly Beneath an Image
Why Doesn't Width/Height Work with Non Positioned Pseudo Elements
Use Excel Vba to Click on a Button in Internet Explorer, When The Button Has No "Name" Associated
CSS Calc Not Working in Safari and Fallback
How to Get Tiles Centered and Left-Justified at The Same Time
HTML Submit-Button: Different Value/Button-Text
CSS Border Color Switch Animation: "From" Color Not Correct
Content Url Is Not Working in Firefox