如果显示错误，则引导程序高度会增加

Question

I've a bootstrap modal with 3 fields First Name, Second Name, Email. I'm validating the form using laravel 5.2. It is successfully giving back the error messages and I'm printing the same within the div I've created just below the input field. But the issue is error messages are increasing the height of the entire popup.

I would like to show the error message just below the input without increasing the height of the popup. Is there some how I can do that??

<div id="registerModal" class="modal fade">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2 register-heading">
                  <center> REGISTER </center>
                </div>
                <form method="POST" action="/user-register" id="register-form">
                  <div id="status-message"></div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="first_name" name="first_name" placeholder="Full Name">
                      <span id="first-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="second_name" name="second_name" placeholder="Last Name">
                      <span id="second-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="register_email" name="email" placeholder="Email">
                      <span id="email-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="hidden" name="_token" value="{{ csrf_token() }}">
                      <input name="register-submit" type="submit" id="register-form-submit" class="btn btn-danger pull-left btn-lg register-button" value="CONTINUE" />
                  </div>
                </form>
              </div>
            </div>
        </div>
    </div>
</div>

----Js----

if (data.first_name) {
    $("span#first-name-register-error-message").html(data.first_name).show();
}
else {
   $("span#first-name-register-error-message").hide();
}

css ------

.regsiter-form-fields {
    padding-bottom: 9%; 
}
.error-message-register {
    border-bottom: 1px red solid;
    /** border-radius: 4px; **/
}

Answer 1

Please use position: absolute; for your error messages and apply some bottom indent on parent to avoid overlapping with other elements...

.regsiter-form-fields {
    padding-bottom: 20px; // modify this as per your needs..
}
.register-error-message {
    position: absolute;
    bottom: 0;
    left: 0;
}

Answer 2

As said, you should use absolute positioning to prevent the flow of the document from being interrupted.

However, don't forget to set position: relative to each form group, so that the errors show up below the inputs and not stacked on top of each other.

.register-form-fields {
  position: relative;
  // padding as required
}

.register-error-message {
  position: absolute;
  bottom: 0;
  left: 0;
}