CODEWITHSUNDEEP
csstwitter-bootstrap
Nate
Nate

Reputation: 41

input-group-addon in Bootstrap 3 smaller than input-group-sm option

In bootstrap 3, I'd like to make an input and input-group-addon that are smaller than the input-group-sm option. I can get my input to 20 px, but unfortunately when I do this I find that the input-group-addon always ends up a pixel or two bigger than the input itself.

Here's a jsfiddle...

http://jsfiddle.net/stazna01/U6MJe/1/

<div 
    class="input-group input-group-sm input" 
    style="width: 200px; height: 20px; margin: 100px auto;">
    <input type="text" 
        class="form-control" 
        placeholder="Search" 
        style="height: 20px; padding: 0; margin: 0;" />
    <span 
        class="input-group-addon" 
        style="height: 20px; padding: 0 4px; margin: 0;">

        <span class="glyphicon glyphicon-search"></span>
    </span>
</div>

Upvotes: 4

Views: 12169

Answers (2)

drps
drps

Reputation: 21

this example is not working for 18px height

<div class="input-group input-group-sm input" style="width: 200px; height: 18px; margin: 100px auto;">
<input type="text" class="form-control" placeholder="Search" style="height: 18px; padding: 0; margin: 0;" />
<span class="input-group-addon" style="height: 18px; padding: 0 4px; margin: 0;">
    <span class="glyphicon glyphicon-search"></span>
</span>

http://jsfiddle.net/drps/Bxm5x/2/ Also, firebug is telling me that actual height of span element in your example is 20.3667px

Upvotes: 0

isherwood
isherwood

Reputation: 61055

Try making the box-sizing properties coordinate:

input, span {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

http://jsfiddle.net/isherwood/U6MJe/6

Upvotes: 1

Related Questions