Twitter Bootstrap Question posted in

How to change placement of JQuery Password Strength Meter for Twitter BootStrap?

I am trying to have the meter placed beside my password field and not below it, here is the image of it on how it looks right at the moment..
Current placement
The code that is placing it like this is..

<div class="form-group" id="pwd-container">
    <label for="txtPassword" class="control-label col-md-2" id="lblAdministrationAdministratorPassword"><b>Password:</b></label>
    <div class="col-md-6">
        <input id="txtPassword" type="password" class="form-control" name="password" />
    </div>
    <div class="col-sm-4">
        <div class="pwstrength_viewport_progress"></div>
    </div>
</div>

And I am trying to get it to look like this..
Placement that I want

JSFiddle

My Fiddle

Tags:

2

Answers


  1. 0 
    <div class="form-group">
                    <label id="lblAdministrationAdministratorPassword" class="control-label col-md-2" for="txtPassword"><b>Password:</b></label>
                    <div class="col-md-6">
                        <input type="password" name="password" class="form-control" id="txtPassword">
                    </div>
                    <div class="col-sm-4">
                        <input type="password" id="rightHere" style="float: left;"><div class="progress" style="float: left;"><div class="progress-bar progress-bar-warning" style="width: 76%;"><span class="password-verdict">Strong</span></div></div>
                    </div>
                </div>

    simply add float left and it’s done

    Login or Signup to reply.
  2. 0

    You have to separate the div, input and label into separate divs with columns so that all will stay in same row.

    Your format should be like below 

    jQuery(document).ready(function() {
  "use strict";
  var options = {};
  options.ui = {
    container: "#pwd-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
      progress: ".pwstrength_viewport_progress"
    }
  };
  options.common = {
    debug: true,
    onLoad: function() {
      $('#messages').text('Start typing password');
    }
  };
  $(':password').pwstrength(options);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/ablanco/jquery.pwstrength.bootstrap/master/dist/pwstrength-bootstrap-1.2.7.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
  <div id="pwd-container">
    <div class="form-group row">
      <div class='col-sm-4 col-md-4  col-xs-4'>
        <label for="password">Password</label>
      </div>
      <div class='col-sm-4 col-md-4  col-xs-4'>
        <input type="password" class="form-control" id="password" placeholder="Password" />
      </div>
      <div class='col-sm-4 col-md-4 col-xs-4 pwstrength_viewport_progress'></div>
    </div>
  </div>
  <div class="row">
    <div id="messages" class="col-sm-12"></div>
  </div>
</form>

    And use some inline styles to set top position.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search