在输入字段和input-group-addon

时间:2019-01-14 13:42:54

标签: html css twitter-bootstrap validation change-password

在用户管理界面中,我的应用程序提供了一个密码输入字段。此字段是Bootsrap input-group,其中既包含form-control,又包含保存图标的input-group-addon

现在,我尝试介绍一种密码强度仪,该仪在技术上可以正常运行。但是,一旦用户在密码字段中输入第一个字符,设计就会中断。如以下屏幕截图所示,input-group-addon的高度会增加:

Input field with password strength meter

我准备了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是否提供更好的方式在文本字段中插入这样的指示符?

1 个答案:

答案 0 :(得分:1)

这是因为位置设置为relative,因此在计算input-group的高度时也会考虑标签。

我将位置从relative更改为absolute,以便不考虑标签。

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

查看更新的JS小提琴。

https://jsfiddle.net/v98h71ry/

这是放置相对定位的项目的位置:

Label placement after position change

输入bottomright的位置后,它会按定义重新定位,但是input-group的初始高度保持不变。