Glyphicon changes height of input group addon

[bassjobsen]

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
</div>

Shows in Firefox (23.0 for ubuntu) the span.glyphicon 1px to height, see:

Setting @padding-large-vertical to 9px will fix this issue. This possible cause many other issues.

[cvrebert]

Confirmed in Firefox 24.0 on OS X.
Works fine in Chrome.

[cvrebert]

X-Ref: #10482

[Diolor]

Also consider checking the 23rd line in this file.

top: 1px;

[bassjobsen]

@Diolor yes, thanks. Your fix works for Chrome on OS X, but doesn't on Firefox (23.0 for ubuntu) see below (it only moves the glyphicon one pixel higher):

Will you also add some information about your html syntax here and on SO? Works your fix for: <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span> or do you use <span class="input-group-addon glyphicon glyphicon-star"></span>

[Diolor]

Below is my Html. And I don't believe I have something on html or body level to interfere with that.

<div id="TimeStart" class="input-group col-lg-4">
    <input id="timepicker" type="text" class="form-control">
    <span class="input-group-addon glyphicon glyphicon-time"></span>
</div>

And yes, <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span> works. In practice this html:

<div id="TimeStart" class="input-group col-lg-4">
    <input id="timepicker" type="text" class="form-control">
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>

However on FF 24 in OS X, with the top:1px removed, it renders it well. The left column below is the two embedded spans, the right is the single span (my old approach/the one in documentation). Both have top:0px.

[karloffenberger]

The way I see it is that the line-height property messes with computed height of the resulting .input-group-addon. Try the .input-group-addon without a glyphicon (e.g. just some text in the <span>) to see the same error.

LESS Snippet

.input-group-lg > .input-group-addon {
  line-height: @line-height-large - .2;
}

This small adjustment fixes the issue which I was witnessing on Win7 IE 10.0.9, FF 24.0 and Chrome 31. I also think the icon is vertically "more centered" now.

[carasmo]

This fixed it in firefox and looks fine in chrome. I stuck this after all other styles.

 .input-group .input-group-addon {
     line-height: 1!important;
 }

[mdo]

Meant to post this here, but added it to #11174 first by mistake. Here it is copy-pasta-ed:

Put together a test case for this: http://jsbin.com/ObUlUcI/2/edit. It would appear setting line-height: 1.2 on those large inputs and buttons does the trick.

For the record, I see a fubared height of input group addons with Glyphicons in Chrome for Mac as well now. Using 1.2 as mentioned above fixes it for me in latest Chrome and Firefox for Mac.

Resetting to line-height: 1 for me doesn't make sense to me—the text will be misaligned. The value has to be consistent for all large buttons and inputs.

[mdo]

For the time being, punting this to v3.0.2, btw.

[mdo]

Fixed per this example after implementing #11174: http://jsbin.com/aweGeWO/7/edit.

[katrazka]

The cause is "" first string. It must be set as writter above for html 5. If it doesn't exists or it has html 4 description ("PUBLIC etc") this error occurs.