Bootstrap: input-group-btn add on gets wrong height for icon, correct height if text value instead.

Created on 23 Mar 2016 · 8Comments · Source: twbs/bootstrap

Im trying to add an input with multiple add ons as shown here. The issue is when I try to use an icon, even just copying the code directly from the docs, the icon is always has the wrong height / padding unless there is some kind of text value inside. To demonstrate, here is the code from the docs I'm using and a screenshot for what gets rendered (className because react):

wrong-height-code

wrong-height

and for comparison, here is what happens when I add an inside the button with the icon:

right-height-code

correct-height

I don't think anything else is affecting the elements because looking in the console, the only styles I see being applied to any of the related elements are bootstrap css and normalize css. Also, this seems to happen when I use any icon whether its glyphicon or font awesome.

css v3

Source

areim3r

Most helpful comment

your are missing the <!DOCTYPE html>

here the JS BIN with the bug :

http://jsbin.com/riledimule/edit?html,output

guillaumevincent on 23 Jun 2016

👍4 ❤1 🎉1 😄1

All 8 comments

Please post a JS Bin or JS Fiddle that demonstrates the problem and doesn't involve React.
Also, what OS and browser are you using?

cvrebert on 23 Mar 2016

I could not replicate via JSFiddle, it works as expected there. However, I still get the same result even after making an MVP html file that only sources Bootstrap and Font-Awesome. The full contents of the MVP file are as follows:

mvp-code

and in my browser this is what it renders:

chrome
firefox
safari

Note that this happens whether I use glyphicon or fontawesome, either way the top and bottom margin are always misaligned unless I add some kind of text value such as on either side of the icon element.

Im running OSX 10.11.3

Also worth noting is that the Bootstrap documentation renders fine in my browsers, and I've used bootstrap in a number of projects before with no issue, so I'm a bit confused where the disconnect is here.

areim3r on 29 Mar 2016

Please post your MVP HTML file as text instead of a screenshot of text.

cvrebert on 29 Mar 2016

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="row">
      <div class="col-xs-6">
        <div class="input-group">
          <input type="search" class="form-control" placeholder="" aria-controls="DataTables_Table_0">
          <span class="input-group-btn"><button class="btn btn-default" type="button"><span class="glyphicon glyphicon-ok"></span></button></span>
        </div>
      </div>
    </div>
  </body>
</html>

areim3r on 30 Mar 2016

JS Bin of the MVP: http://jsbin.com/hopale/edit?html,output

cvrebert on 18 Apr 2016

The Bin renders correctly for me in Safari, Firefox, and Chrome on OS X El Capitan.
Closing as not reproducible.

cvrebert on 18 Apr 2016

your are missing the <!DOCTYPE html>

here the JS BIN with the bug :

http://jsbin.com/riledimule/edit?html,output

guillaumevincent on 23 Jun 2016

👍4 ❤1 🎉1 😄1

Hi @guillaumevincent!

You appear to have posted a live example (http://jsbin.com/riledimule/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 1, column 1 thru column 6: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.
line 25, column 3 thru column 9: End tag for body seen, but there were unclosed elements.
line 9, column 5 thru column 27: Unclosed element div.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)