Menu
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline"> <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> <div class="checkbox"> <label> <input type="checkbox" /> and Checkboxes </label> </div> <select class="form-control" style="width: 150px;"> <option>and Selects</option> </select> <button type="submit" class="btn btn-default">and Buttons</button> <div class="input-group" style="width: 220px;"> <span class="input-group-addon">BUT</span> <input type="text" class="form-control" placeholder="not with input-groups" /> </div> </form> 
497
to make it simple, just add a class="form-inline" before the input.
input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use . input-group-prepend to add the help text in front of the input, and . input-group-append to add it behind the input.
Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required. Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.
Inline forms Use the . form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
The inputs contain the placeholder attribute to specify the field description. Forms with inline elements are one of the efficient ways of designing web forms. Why do we need to display Bootstrap inline forms?
5 When appending an input-groupto a form-inline, the input-groupappears below the form on a "new line" instead of inline with the other controls. It seems that this is because the input-groupwrapper class has displayset to tablewhereas the other inputs, which work fine, have their displayset to inline-block.
Of course, it is not possible to give the input-groupthe inline-blockdisplay because its child add-onspan, which has display: table-cell, needs the property of the parent to align correctly. So my question is:is it possible to use input-groupinside an inline form using Bootstrap classes exclusively?
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input.
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline"> <div class="form-group"> <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> </div> ... <div class="form-group"> <div class="input-group" style="width: 220px;"> <span class="input-group-addon">BUT</span> <input type="text" class="form-control" placeholder="not with input-groups" /> </div> </div> </form> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With