0

I couldnt make up the title clear (feel free to edit it).

So, I have included an image to show the problem.

See the Google button is at same level as input but search button is overflowing.

See the search button overflowing

Error occurs only when I place just the icon-search inside button. If I replace icon with text, it fixes the problem. It has something to do with font-size : 17.5px of .btn-large when I change it to font-size:16.5px , it works. I can hack it but I want a valid method.

Demo

Markup:

<form class="input-prepend input-append">
    <div class="btn-group"> <span class="btn btn-large dropdown-toggle" data-toggle="dropdown">Google <span class="caret"></span></span>
        <ul
        class="dropdown-menu">
            <li><a href="#">a</a>
            </li>
            <li><a href="#">b</a>
            </li>
            </ul>
    </div>
    <input type="text" class="input-xlarge" placeholder="Search">
    <button class="btn btn-large" type="submit"> <span class="icon icon-search"></span>

    </button>
</form>

CSS

form .input-xlarge {
    padding: 11px 19px;
    /* equal to btn-large */
}

Edit:

Experiencing problem in,

Chrome Version 24.0.1312.57 Firefox 18.0.1 Opera 12.14 (all running in Ubuntu 12.04)

Jashwant
  • 28,410
  • 16
  • 70
  • 105

2 Answers2

2

Bootstrap icons are more commonly used with the <i> tag.

<i class="icon-search"></i>

I'm not saying this will fix the problem, however. This could be a browser-specific issue. I know I had issues with IE using input-append, but this is nothing a browser-specific stylesheet can't fix.

.input-append { height:19px; }
.input-append i { margin:0; padding:0; }

Edit: This doesn't appear to be an issue on Chrome. At least not for the examples given on the Bootstrap site.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • I have asked a good question about `` tags in past. Have a look [here](http://stackoverflow.com/questions/11135261/i-tag-for-icons) I am having problem in chrome/ff and opera. – Jashwant Feb 15 '13 at 08:59
  • It has nothing to do with `i` since the icon selector in css is `[class^="icon-"]` and not `i`. `i` is used just because it's short i guess and because icon starts with i - using span is much more semantic since it's a neutral element. – easwee Feb 15 '13 at 09:04
  • Ah, a great question there! I can't imagine the `` tag here fixing your problem, as I mentioned, but as Bootstrap uses it over `` it's possible that the default span styling would cause this to be a problem. I did test in Chrome and couldn't replicate the issue, but I have seen this before in IE. I think your best bet would be to just create a browser-specific stylesheet to handle it. I've used Bootstrap in 5 or 6 sites now and in all of them I've had to add in a few tweaks for IE (7 especially). – James Donnelly Feb 15 '13 at 09:05
2

http://jsfiddle.net/chne9/1/

.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
    vertical-align:top;    
}

By default this is set to text-top - try settings just to top (edit the selector to fit just the problematic button - just to make sure you don't break any other bootstrap functionality).

easwee
  • 15,757
  • 24
  • 60
  • 83
  • @Jashwant - wouldn't really know why they use `text-top` - would have to dig in for this, but no time now :) – easwee Feb 15 '13 at 09:01
  • May be because `icons` are usually accompanied by text inside button. Your solution looks good and fixes the problem. – Jashwant Feb 15 '13 at 09:05
  • @Jashwant - probably - still I would apply this fix just in this case (I guess increased font size messes up with the icon alignment). – easwee Feb 15 '13 at 09:06