Bootstrap 3.0.x - How To Unconstrain Input-group Input Width When Using Glyphicons?

Not sure if this is a feature or a bug... There has been a change in behaviour with input-groups using glyphicons between bootstrap-3.0.0 and bootstrap-3.0.1 and above. Starting fr

Solution 1:

It appears to be using a CSS selector :empty to set a width of 1em on the .glypicon which is overriding the default width of 1%. I'm not sure why it's affecting it so much, I think it's affecting the table layout somehow.

Anyway, you can fix it 2 ways.

Override that :empty styling for items that are form addons:

.input-group-addon.glyphicon:empty {
  width: 1%;
}

Demo

OR

Set the parent (that has the display: table) to be 100% wide:

.input-group {
  width: 100%;
}

Demo

Solution 2:

Glyphicon classes cannot be used with any other classes.

So by separating the input-group-addon class and glyphicon class into their own spans, it is easily fixed and yields correct results:

<span class="input-group-addon">
    <span class="glyphicon glyphicon-user"></span>
</span>

jsfiddle demo

The documentation even says so in a big red warning! :(

Don't mix with other components

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

Solution 3:

I'm having the same problem except withou using glyphicon or any input-group-addon.

When I have the following code in a page and I refresh the page non stop I can see the middle textbox trying to expand (flicker). Same behaviour if I remove the input-group.

<fieldset>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="email"
                    class="form-control"                            
                    placeholder="Email address"
                />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group" style="width: 100%">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </span>
                <input type="text" 
                    class="form-control"                            
                    placeholder="Full name"
                />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="email"
                    class="form-control"                            
                    placeholder="Email address"
                />
            </div>
        </div>
    </fieldset>

For me it's all about the type used, if I set the type to text or password the width is restraint to it's original size. I have tried with Bootstrap 3.0.0 and 3.1.0. This behaviour happen on Chrome 34.0.1847 and Firefox 21.0 as well.