エラーを表示するとブートストラップの高さが増加する

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を設定することを忘れないでください。エラーが入力の下に表示され、互いの上に重ならないようにします。