I am facing an issue with adding a Textfield input-group-addon. The problem arises when I combine this class with a glyphicon, as the icon does not align correctly next to the textfield. You can see the issue in the image below.
If anyone has any insights or suggestions on why this might be happening, I would greatly appreciate it!
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Gender</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
Male
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
Female
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Date of Birth</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
</div>
</div>