javascript - JQuery div.show() 正在调整我的字段大小

Question

我有一个隐藏的 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，但输入字段的高度非常小。顺便说一句，如果我打开 Firebug ，输入高度会自动调整。有谁知道为什么吗？

谢谢

Answer 1

尝试在你的 css 中修复高度:

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

这是一个 fiddle 示例:https://jsfiddle.net/qboena51/