CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BG100
BG100

Reputation: 4531

Bootstrap input group addon alignment problems

My input group addon doesn't line up with my input text box... what am I doing wrong?

<div class="form-group">
    <label for="primary">Primary:</label>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-earphone"></span>
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
    </div>
</div>

The above code renders this:

Miss-aligned addon

The addon is 1px lower than the text box, but I can't work out why!

http://www.bootply.com/iR1SvOyEGH

Upvotes: 8

Views: 9450

Answers (3)

Jason
Jason

Reputation: 29

This is an easy fix: glyphicon has a default class in css with top: 1px;

You need to take that off, by making your own class or just changing it if that is the only place you are using glyphicon. I'm not sure why they do this by default but it will definitely make your eyes sad. The entire thing looks like this in css:

.glyphicon {
    position: relative;
    top: 1px;    <----------------------------- Here is your culprit
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

Upvotes: 2

Punit
Punit

Reputation: 460

Try This One.

This problem comes in chrome..

just do some changes

<div class="form-group">

        <div class="col-md-12">
        <div class="col-md-1">
            <label for="primary">Primary:</label>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
                </div>
            </div>


            </div>
        </div>

Upvotes: 16

Alex
Alex

Reputation: 196

I modified your bootply code. This might do what you want. Instead of adding form-group class on your parent element, put input-group class and move the label outside of it.

Edit:

Sorry, now I see your problem. The problem is when you use glyphicons in the input group. This stackoverflow answer might help.

Upvotes: 0

Related Questions