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:

<spanclass="input-group-addon"><spanclass="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><divclass="form-group"><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="email"class="form-control"placeholder="Email address"
                /></div></div><divclass="form-group"><divclass="input-group"style="width: 100%"><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-user"></span></span><inputtype="text"class="form-control"placeholder="Full name"
                /></div></div><divclass="form-group"><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="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.