CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jashwant
Jashwant

Reputation: 29005

Twitter bootstrap : button with only icon inside input-append overflows past the input

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)

Upvotes: 0

Views: 5782

Answers (2)

easwee
easwee

Reputation: 15905

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).

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

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.

Upvotes: 2

Related Questions