Bootstrap: btn-lg is smaller than input-lg

Link: btn-lg is smaller than input-lg
Example: input-size-bootstrap

    In all modern browsers except in IE10+, it seems that the large buttons with large inputs for input groups are smaller. The difference is only a pixel but is noticeable on some screens. To be clear this issue can be avoided if you use the input-group-lg however my test prove that the heights stay consistent regardless which style classes you use. I didn't find this out until I started looking into the issue and I think this is kinda nit picking but something that should be corrected to prevent future mistakes.

    For my first attempt I tried changing the @line-height-large but if I changed the @line-height-large this affects the input-group-lg, and select input-group-lg as well as the large buttons. So instead to just change the large buttons I set the large button line-height by adding a 0.01 value. This still had problems in firefox, which lead me to the final solution below. File(s) - just the buttons.less

Possible Solution
    Since firefox results in a 48px vs. 46px I just add a height of 46px to be consistent across all browser and this works because the input-group-lg also uses a height 46.

Alternative Solution
<div class="input-group input-group-lg">
<span class="input-group-btn">
      <button class="btn" id="sizing-addon1">Large</button>
   <input class="form-control" placeholder="Input" type="text" />

    I haven't written many qunit tests but my test is  really simple and based on other code people have written. The test builds out the elements in question, uses jquery to check the heights then removes it from the page. Since it would appear in the result otherwise. I'm using the css in the index test page this might affect other tests. This can be seen with the tooltip test, fails because of it.

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync