Добавить метку между полем ввода и input-group-addon

Question

В пользовательском интерфейсе управления мое приложение предоставляет поле ввода пароля. Это поле является Bootsrap input-group с обоими, form-control и input-group-addon, которые содержат значок.

Теперь я попытался ввести измеритель надежности пароля , который технически работает нормально. Однако дизайн нарушается, как только пользователь вводит первый символ в поле пароля. Высота input-group-addon увеличивается, как вы можете видеть на следующем скриншоте:

Я подготовил JS Fiddle , чтобы продемонстрировать проблему. Кроме того, вот соответствующая часть кода:

<div class="form-group">
  <div class="input-group">
    <input type="password" class="form-control ok-password" ng-class="(joinTeamForm.password.$dirty && joinTeamForm.password.$invalid) ? 'error' : ''" id="password" name="password" placeholder="Enter Password" ng-required="true" ng-model="password">

    <div class="label password-count" ng-class="password.length > 7 ? 'label-success' : 'label-danger'" ng-cloak>{{ password | passwordCount:7 }}</div>

    <div class="input-group-addon">
      <span class="glyphicon glyphicon-lock"></span>
    </div>
  </div>
</div>

Как я могу предотвратить изменение размера input-group-addon или правильно вставить метку с подсчетом длины пароля? Предоставляет ли Bootstrap лучшие средства для вставки такого индикатора в текстовое поле?

Answer 1

Это потому, что позиция установлена ​​на relative, следовательно, она также учитывает метку при расчете высоты для input-group.

Я изменил положение с relative на absolute, чтобы ярлык не рассматривался.

.password-count {
  position: absolute;
  bottom: 8px;
  right: 45px;
  z-index: 10;
}

Проверьте обновленную JS Fiddle.

https://jsfiddle.net/v98h71ry/

Здесь будет размещен относительно позиционированный предмет:

Когда вы ввели позиции bottom и right, он перемещается в соответствии с определением, но начальная высота input-group остается неизменной.