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:

enter image description here

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

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -