CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvalidationchange-password
user1438038
user1438038

Reputation: 6059

Add label between input field and input-group-addon

In a user management interface, my application provides a password input field. This field is a Bootsrap input-group with both, a form-control and an input-group-addon that holds an icon.

Now I tried to introduce a password strength meter, which works fine technically. However, the design breaks, as soon as the user enters the first character in the password field. The height of the input-group-addon increases, as you can see in the following screenshot:

Input field with password strength meter

I prepared a JS Fiddle to showcase the issue. Additionally, here is the relevant part of the code:

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

How can I prevent the input-group-addon from changing its size or insert the label with the password length count properly? Does Bootstrap provide better means to insert such an indicator within a text field?

Upvotes: 0

Views: 719

Answers (1)

Prajwal
Prajwal

Reputation: 4000

It is because the position is set to relative, hence it also considers the label while calculating height for input-group.

I changed the position from relative to absolute so that label will not be considered.

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

Check out updated JS Fiddle.

https://jsfiddle.net/v98h71ry/

This is where the relatively positioned item will be placed:

Label placement after position change

As you've entered bottom and right positions, it re-positions as defined, but the initial height of input-group remains as is.

Upvotes: 1

Related Questions