Ошибка выравнивания входной группы-бутстрапа при добавлении диапазона для требуемых звездочек

У меня есть следующий DatePicker Bootstrap. Когда я добавил span (spanAstreisk), чтобы отобразить звездочку, указывающую на обязательное поле, высота значков увеличилась, и похоже, что она не выровнена по текстовому полю. Как я могу это исправить?

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

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

enter image description here enter image description here

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>

Ответы

Ответ 1

Похоже, проблема заключается в том, что вы помещаете <label> внутри input-group, но только внутри input-group-addon, input-group-btn и form-control должны находиться внутри input-group. Это <label> заставляет значки растягиваться для размещения метки. Поэтому я удалил <label> и вывел его за пределы input-group. После того, как я это сделал, аддон с звездочкой работал нормально.

Вот скрипка с моими изменениями: https://jsfiddle.net/ezvzvvqg/18/

Здесь он находится в форме Stack Snippet:

<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>

Ответ 2

Здесь новый код

<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
}

Посмотрите на это решение: jsfiddle.net/SeniorFront/z24cc91a

Ответ 3

Вам просто нужно немного позиционирования:

#spanAstreisk{
    position: absolute;
    top: 0;
}

Update:

Ярлык, который у вас был внутри группы ввода, является реальной проблемой, а не звездочкой. По крайней мере, не в последней скрипке, которая у вас есть.

Метка изменяет поток и выравнивание ввода и значок. Вы можете отключить его из потока с абсолютным позиционированием:

#divDatePickerEffectiveDate label{
    position: absolute; left: 0; 
    bottom: -25px;
}

https://jsfiddle.net/7512wj48/

Ответ 4

Рабочий пример 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
              

           </style>
           </head>
           <body>
           
           <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="" 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" style="height: 20px;">
           <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk" style="position: absolute;top:10px;"></span>   
       </div>
        
     </div>
     
   </td>
   </tr>

 </table>
           </body>
           </html>

Ответ 5

Здесь у вас много правильных ответов, поэтому другой подход заключается в том, чтобы поместить звездочку в поле ввода, чтобы указать, что поле является обязательным.

$("#txtEffectiveDate").on("focus",function(){
$( "#spanAstreisk" ).animate({
    opacity: 1
  },600);
$("#spanAstreisk").css("opacity",1);
}).on("blur",function(){
$( "#spanAstreisk" ).animate({
    opacity: 0.25
  },600);
});
#spanAstreisk {
  position:absolute;
  top:1rem;
  right:4.5rem;
  opacity:.25;
  z-index:9999;
  color:red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

<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;">
       <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
       <div class="input-group-addon">
               <span class="glyphicon glyphicon-th"></span>
       </div>       
     </div>
   </td>
   </tr>
 
 </table>

Ответ 6

Я добавляю css, работая с позицией, и вот результат

https://jsfiddle.net/e1sue1ym/

`.input-group.date {
  padding-right: 20px;
  margin-bottom: 20px;
}
.input-group.date label.error {
  position: absolute;
  bottom: -23px;
  left: 0;
}
.input-group .requiredAsterisk {
  position: absolute;
  right: 0px;
}`

Это то, чего вы хотите достичь?

Ответ 7

<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>

И для вашей таблицы стилей

----- Таблица стилей ----

#sizing-addon1{
  background-color: transparent;
  border:none;
  font-size: 9px;
  font-weight: normal;
  padding:2px 5px;
  color:#C00
}

Ответ 8

Еще один способ добавить следующий стиль в область astrisk:

#spanAstreisk {
  display: table-cell;
  vertical-align: middle;
}

Вот ваш обновленный скрипт: Fiddle