css - Bootstrap input-group-addon Not Vertically Aligned -
i'm using following markup 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 of own css in 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, when remove whole custom stylesheet, still presented vertical alignment issue can see below:
it looks it's 1 pixel off should be. i've tried setting positioning relative
, set bottom: 1px
doesn't appear budge.
if remove vertical-align
property messes of it.
does have idea causing problem?
.glyphicon { top: 1px; }
change top:0px;
or add style="top:0px;"
top span
Comments
Post a Comment