Bootstrap input-group-addon alignment issue when a span is added for required asterisks

Question

I have the following Bootstrap datepicker. When I added a span (spanAstreisk) to display an asterisk indicating a required field, the height of icons is increased and it looks like it is not aligned with the textbox. How can I fix this?

Fiddle2: https://jsfiddle.net/ezvzvvqg/15/

Fiddle1: https://jsfiddle.net/ezvzvvqg/10/

HTML

<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

It looks like the problem is that you put a <label> inside the input-group but only input-group-addon, input-group-btn and form-control should be inside the input-group. That <label> is forcing the icons to stretch to accommodate the label. So I removed the <label> and put it outside the input-group. After I did that, the asterisk addon worked fine.

Here is a fiddle with my changes: https://jsfiddle.net/ezvzvvqg/18/

Here it is in Stack Snippet form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>

Update: I noticed that you had one other asterisk without input-group-addon. If you want the asterisk without the style of an input-group-addon, then you can use a span and then apply styles that will make it act like a input-group-addon. The style declarations that you need are: display:table-cell, vertical-align-middle (these two styles make the asterisk vertically-centered) and width:1% (to make it take the least amount of space). Plus padding:6px 12px to give it the same spacing as the addons. Here is a demo:

#spanAstreisk {
  display:table-cell;
  width:1%;
  vertical-align:middle;
  padding:6px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>

Answer 2

Here's the new code

<table>
    <tr>
        <td class="tdPopupTextDescription">Effective Date:
        </td>
        <td id="tdEffectiveDate">
            <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
                <div class="input-group-addon">
                    <span id="test" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
                <div class="input-group-addon spanAstreisk">
                    <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.spanAstreisk{
    background:none;
    border:0
}

Look at this solution: jsfiddle.net/SeniorFront/z24cc91a