显示错误时引导高度增加答案

【问题标题】：Bootstrap height increases on showing error显示错误时引导高度增加
【发布时间】：2016-07-26 19:25:52
【问题描述】：

我有一个引导模式，其中包含 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; **/
}

【问题讨论】：

您可以将可见性更改为隐藏，而不是隐藏错误消息。这将在已经考虑错误消息高度并且不会根据您显示的消息增加/减少的高度创建您的模式。但是，当错误不可见时，您会有明显的空白。
@Tricky12 不错的解决方案...但是弹出窗口会很大...就像非常大...我想要它又小又漂亮...

标签： jquery html css twitter-bootstrap laravel-5

【解决方案1】：

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

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

【讨论】：

嗨，我已将我的 css 包含在问题中。尝试了您的解决方案，现在错误消息位于所有表单字段的顶部...
如果你能提供一个小提琴会很酷..但从你的评论我理解的是绝对位置的bcz，错误消息是从DOM的正常流中取出的..请增加填充 -如果需要，底部到 25 或 30 像素或更多，以免它们与输入重叠
此外，您可以减小错误消息的字体大小并更改错误消息的底部位置（可能一些 -ve 底部缩进会有所帮助）以避免输入之间的空白问题..跨度>

【解决方案2】：

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

但是，不要忘记将position: relative 设置为每个表单组，以便错误显示在输入下方，而不是堆叠在一起。

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

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

【讨论】：