Using input-group inside an inline form

Question

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>

This is a bug, maybe in your case you can use pull-right in the input-group class. — PiLHA
– PiLHA, Commented Aug 12, 2013 at 14:48
Yes this may be a bug. And using pull-right is not a good solution regardless of my case: the vertical spacing between inputs is lost and if there are two input-groups they are displayed wrongly. IMHO it is better to use a functioning solution with custom classes rather than an erroneous hack with built-in classes. — edsioufi
– edsioufi, Commented Aug 12, 2013 at 15:14

edsioufi · Accepted Answer · 2013-08-12 19:06:01Z

44

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>

answered Aug 12, 2013 at 19:06

edsioufi

8,3553 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marc Over a year ago

I'm on 3.0.3 and I still have this problem. Adding the input-group-addon after the form-control creates a new line

Gabriel Over a year ago

@Marc : I'm on 3.0.3 and to do what you want I do "form.form-inline { display: inline; } form.form-inline .form-group .input-group input + .input-group-addon { width: initial; }". I don't know if it's compatible with all the browsers.

Gabriel Over a year ago

@Marc : I forgot to say the input need a width or max-width.

adamdport Over a year ago

+1 I wish this was more apparent in the documentation!

KFunk Over a year ago

Working example of @edsioufi 's answer using Bootstrap 3.2.0: jsfiddle

|

Damon · Accepted Answer · 2013-08-12 16:40:19Z

1

I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.

try putting

<div class="col-lg-1"></div>

around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.

edited Aug 12, 2013 at 16:40

answered Aug 12, 2013 at 16:25

Damon

3,0207 gold badges26 silver badges28 bronze badges

1 Comment

edsioufi Over a year ago

We can use columns for aligning any form controls (regardless of the problematic input-group). Still, BootStrap provides the form-inline class (which would be unnecessary if it was encouraged to use columns). This demo makes me think that the reason behind the existence of the inline form is that using columns does not yield good results from a responsive design point of view. I would still prefer custom classes to the columnar design (or even fall back to horizontal-forms instead).

Collectives™ on Stack Overflow

Using input-group inside an inline form

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related