2

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 from bootstrap-3.0.1, adding a glyphicon to an input-group causes the input width to be constrained.

I have two input-groups: one with a glyphicon-user, the other with an ascii @ sign.

New behaviour:

As can be seen from the image below, with bootstrap-3.0.1 and above, the width of the input-group with a glyphicon-user is constrained, while the one with an @ sign is not.

bootstrap-3 0 3

jsfiddle of the above issue with bootstrap-3.0.3 (behaviour is the same with 3.0.1 and 3.0.2)

Old behaviour:

On the other hand, as can be seen from the image below, the previous behaviour with bootstrap-3.0.0 meant the width of the input-group with a glyphicon-user was not constrained, thereby matching the one with an @ sign.

bootstrap-3 0 0

jsfiddle of the above with bootstrap-3.0.0

Question:

How can I get the bootstrap-3.0.0 behaviour (unconstrained input-groups when using glyphicons)?

Steve Lorimer
  • 27,059
  • 17
  • 118
  • 213

3 Answers3

2

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

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • Turns out I didn't rtfm properly! From the docs: **Don't mix with other components** Icon classes cannot be combined with other elements. They are designed to be standalone elements. – Steve Lorimer Jan 15 '14 at 06:01
0

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

enter image description here

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.

Steve Lorimer
  • 27,059
  • 17
  • 118
  • 213
0

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.

Mario
  • 335
  • 3
  • 11