在输入字段和输入组插件之间添加标签

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

因为position设置为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 的初始高度保持不变。

在输入字段和输入组插件之间添加标签

Add label between input field and input-group-addon

html

css

twitter-bootstrap

validation

change-password