Reputation: 6110

How to display div content over the button element?

I have password input field with specific requirements. When user clicks on the input field div element will show. The problem is that Submit button displays in the div. I'm wondering how div can be displayed over that button ? Here is example:

$("input[type='password']").keyup(checkPsw).focus(function() {
  $(".pswd_info").show();
}).blur(function() {
  $(".pswd_info").hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
  } else {
    $(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
    $(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
  }
}

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
}

.pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

.pswd_info ul {
  margin: 0;
  padding: 0;
}

.pswd_info li {
  list-style: none;
}

.invalid {
  background: url(../images/invalid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #ec3f41;
}

.valid {
  background: url(../images/valid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #3a7d34;
}

.message-submit {
  display: none;
  padding: 5px 15px !important;
  margin: 0px !important;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
    <input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="password"><span class="label label-primary">Password</span></label>
    <input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
    <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
    <div class="panel panel-primary pswd_info">
      <div class="panel-heading">
        <h5>Password requirements:</h5>
      </div>
      <div class="panel-body">
        <ul>
          <li class="invalid letter">At least <strong>one letter</strong></li>
          <li class="invalid capital">At least <strong>one capital letter</strong></li>
          <li class="invalid number">At least <strong>one number</strong></li>
          <li class="invalid character">At least <strong>one special character</strong></li>
          <li class="invalid length">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group required">
    <label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
    <input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

If you run the snippet and click on the password input field you will see Submit button inside of the div that displays password requirements. What would be the best way to fix this issue?

Upvotes: 1

Answers (3)

sujithuix

Reputation: 264

This can be solved in two ways.

Removing the outer div with class 'row' will solve the issue. There is no need to use a div with class 'row' here. According to me, this is the best way as we are removing unwanted line of code instead of fixing it using CSS.

<div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
</div>

But below one line of code would be the easiest way to solve the issue.

.pswd_info {
  z-index: 1;
}

Its better to use only the required value (order) for z-index like 1,2 etc. If you use bigger value like 999 unnecessarily, then again you may end up adjusting the values when you use another div which has be shown over this, say, a modal pop-up.

Upvotes: 1

lopoto

Reputation: 276

Simply add the attribute z-index to your div and your button, so that the button is shown under your div.

//Your password div
.pswd_info {
  z-index: 10;
}

//Your button
#frm_submit {
    z-index: -10;
}

$("input[type='password']").keyup(checkPsw).focus(function() {
  $(".pswd_info").show();
}).blur(function() {
  $(".pswd_info").hide();
});

function checkPsw() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $(this).closest(".panel-body").find(".length").removeClass('valid').addClass('invalid');
  } else {
    $(this).closest(".panel-body").find(".length").removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $(this).closest(".panel-body").find(".letter").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".letter").removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $(this).closest(".panel-body").find(".capital").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".capital").removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/(?=.*[?!@#$%^&*-])/)) {
    $(this).closest(".panel-body").find(".character").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".character").removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $(this).closest(".panel-body").find(".number").removeClass('invalid').addClass('valid');
  } else {
    $(this).closest(".panel-body").find(".number").removeClass('valid').addClass('invalid');
  }
}

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index: 10;
}

.pswd_info::before {
  content: "\25B2";
  position: absolute;
  top: -12px;
  left: 45%;
  font-size: 14px;
  line-height: 12px;
  color: #337ab7;
  text-shadow: none;
  display: block;
}

.pswd_info ul {
  margin: 0;
  padding: 0;
}

.pswd_info li {
  list-style: none;
}

.invalid {
  background: url(../images/invalid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #ec3f41;
}

.valid {
  background: url(../images/valid.png) no-repeat 0 50%;
  padding-left: 22px;
  line-height: 24px;
  color: #3a7d34;
}

.message-submit {
  display: none;
  padding: 5px 15px !important;
  margin: 0px !important;
}

#frm_submit {
 z-index: -10;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="frmMyaccount" id="frmMyaccount" class="submit-hearing" data-method="MyAccount" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-primary">UserName</span></label>
    <input type="text" class="form-control check-account" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="password"><span class="label label-primary">Password</span></label>
    <input type="password" class="form-control" name="frm_password" id="frm_password" placeholder="Enter Password" maxlength="64">
    <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger"><b> ? ! @ # $ % ^ & * -</b></span></small>
    <div class="panel panel-primary pswd_info">
      <div class="panel-heading">
        <h5>Password requirements:</h5>
      </div>
      <div class="panel-body">
        <ul>
          <li class="invalid letter">At least <strong>one letter</strong></li>
          <li class="invalid capital">At least <strong>one capital letter</strong></li>
          <li class="invalid number">At least <strong>one number</strong></li>
          <li class="invalid character">At least <strong>one special character</strong></li>
          <li class="invalid length">Be at least <strong>8 characters</strong></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group required">
    <label class="control-label" for="email"><span class="label label-primary">Email address</span></label>
    <input type="email" class="form-control" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

Upvotes: 1

Jerdine Sabio

Reputation: 6130

Add z-index to pswd_info. In my test z-index:9999 worked.

.pswd_info {
  display: none;
  position: absolute;
  font-size: .875em;
  z-index:9999;
}

Upvotes: 2

How to display div content over the button element?

Answers (3)

Related Questions