JQuery div.show（）は私のフィールドのサイズを変更しています

Question

私はチェックボックスをクリックするとdivが表示されるhide divを持っています。私の問題は、divが入力フィールドの高さが小さすぎることを示すときです。

私のdiv：

<div id="payment" style="display: none;"> 
    <div class="form-group"> 
     <label class="col-lg-2 col-xs-offset-2">Credit Card</label> 
     <div class="col-lg-2" id="sq-card-number"></div> 
    </div> 
    <div class="form-group"> 
     <label class="col-lg-2 col-xs-offset-2">CVV</label> 
     <div class="col-lg-1" id="sq-cvv"></div> 
    </div> 
    <div class="form-group"> 
     <label class="col-lg-2 col-xs-offset-2">Expiration Date</label> 
     <div class="col-lg-1" id="sq-expiration-date"></div> 
    </div> 
    <div class="form-group"> 
     <label class="col-lg-2 col-xs-offset-2">Postal Code</label> 
     <div class="col-lg-1" id="sq-postal-code"></div> 
     <input type="hidden" id="card-nonce" name="nonce"> 
    </div> 
    <div class="form-group"> 
     <br /> 
     <br /> 
     <div class="col-xs-12 col-xs-offset-1"> 
      <button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button> 
      <br /> 
      <br /> 
     </div> 
    </div> 
</div> 

入力フィールドのCSS：

<style type="text/css"> 
    .sq-input { 
     border: 1px solid #CCCCCC; 
     margin-bottom: 10px; 
     padding: 1px; 
    } 
    .sq-input--focus { 
     outline-width: 5px; 
     outline-color: #70ACE9; 
     outline-offset: -1px; 
     outline-style: auto; 
    } 
    .sq-input--error { 
     outline-width: 5px; 
     outline-color: #FF9393; 
     outline-offset: 0px; 
     outline-style: auto; 
    } 
</style> 

そして、私はjQueryのでそのdiv要素かどうかを表示するように制御します

$('#agree').change(function() { 
    if($(this).is(":checked")) { 
     $("#payment").show(); 
     $("#payment").scrollTop($("#payment").prop("scrollHeight")); 
    } else{ 
     $("#payment").hide(); 
    } 
}); 

ここにはありますdivにチェックボックスがあります：

<div class="form-group"> 
       <div class="col-xs-12 col-xs-offset-2"> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions 
         </label> 
        </div> 
        <br /> 
        <br /> 
       </div> 
      </div> 

すべてうまくいきます。私のチェックボックスをチェックするとdivが表示されますが、入力フィールドの高さは非常に小さいです。ところで、火かき棒を開けば、入力の高さが自動的に調整されます。なぜ誰が知っていますか？

おかげで、あなたのCSSの高さを修正する

Answer 1

てみてください：ここで

.sq-input { 
    border: 1px solid #CCCCCC; 
    margin-bottom: 10px; 
    padding: 1px; 
    height: 20px; 
} 

はフィドルexempleです：https://jsfiddle.net/qboena51/