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

Question

我有一个具有3个字段的引导模态，名字，姓氏，电子邮件。 我正在使用laravel 5.2验证表单。 它已成功返回错误消息，并且正在在输入字段下方创建的div中打印相同的消息。 但是问题是错误消息正在增加整个弹出窗口的高度。

我想在输入下方显示错误消息，而不增加弹出窗口的高度。 有什么我可以做到的吗？

<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

请使用position: absolute; 您的错误消息，并在父级上应用一些底部缩进，以避免与其他元素重叠...

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

Answer 2

如前所述，您应该使用绝对定位来防止文档流被打断。

但是，不要忘了设置position: relative对于每个表单组，以使错误显示在输入下方，而不会彼此叠加。

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

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