CODEWITHSUNDEEP
htmltwitter-bootstrap
VisualBean
VisualBean

Reputation: 5008

bootstrap input-group 1px misallignment between addon and input

I have the following html - using Bootstrap

<div class="input-group" style="width:100px;">
    <span class="input-group-addon glyphicon glyphicon-time" ></span>
    <input type="text" class="form-control" placeholder="Time">
</div>

which produces the following very annoying output

enter image description here

A very annoying 1-2px aligning difference between input and addon - and I cannot for the life of me figure out why this is. Can be seen in this fiddle

Upvotes: 0

Views: 156

Answers (3)

Thịnh Phạm
Thịnh Phạm

Reputation: 2673

I used to have a similar issue. The reason is I compiled bootstrap sass and Sass Number Precision parameter was set to 5. It must be >= 8 to avoid the issue. Hope it will help if someone is compiling Bootstrap with Sass.

Upvotes: 1

Alex Ariza
Alex Ariza

Reputation: 41

the ' .glyphicon ' has a top 1 px put it in 0, as .glyphicon {top: 0px}

Upvotes: 1

chris
chris

Reputation: 4867

I think the reason for this behaviour is the glyphicon class.

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">
        <span class="glyphicon glyphicon-time"></span>
    </span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

I put a second span into the first one and it looks nice.

Upvotes: 0

Related Questions