I'm using the following markup with Bootstrap:
<div class="row">
<label class="col-md-4">Date of Completion of Checklist</label>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control datepicker">
<span class="input-group-addon glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
I have some of my own CSS in a separate file, including:
.form-control {
border-color: #000;
border-radius: 0;
box-shadow: none;
}
.form-control:focus {
border-color: #009966;
}
label {
font-weight: bold;
margin-top: 8px;
}
.input-group-addon {
background: #fff;
border-color: #000;
}
However, even when I remove my whole custom stylesheet, I am still presented with this vertical alignment issue you can see below:
It looks like it's 1 pixel off what it should be. I've tried setting the positioning to relative
and set bottom: 1px
however it doesn't appear to budge.
If I remove the vertical-align
property it completely messes up the look of it.
Does anyone have an idea what could be causing the problem?
change this to
top:0px;
or addstyle="top:0px;"
top your span