调整步长大小，使所有字段都适合

Question

我试图弄清楚如何根据用户所处的步骤调整背景大小，以便每个步骤都显示所有字段。是否可以根据他们所处的步骤调整大小？我已经尝试过 css 和 js 并且失败了，完全破坏了我想要的外观。谁能指导我如何根据他们所处的步骤来回调整背景大小？

在 Js 中我尝试添加这样的东西

onStepChanged: function (event, currentIndex, priorIndex)
                {
                    if (currentIndex === 2)
                    {
                        $(".wizard-big.wizard > .content").css("min-height", "530px");
                    }
                },

或者像这样：

onStepChanged: function (event, currentIndex, priorIndex)
                {
                    $(".wizard-big.wizard > .content").css({
                        height: $("#div").height()
                    });
                },

HTML5

<form id="form" action="#" class="wizard-big">
    <h1>Employee</h1>
      <fieldset>
          <h2>Employee Information</h2>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Name</label>
                      <input id="name" name="name" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Date</label>
                      <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Job Title</label>
                      <input id="title" name="title" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Department</label>
                      <input id="department" name="department" type="text" class="form-control required">
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Date Hired</label>
                      <input id="hiredDate" name="hiredDate" type="text" class="form-control required">
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="form-group">
                      <label>Termination Date</label>
                      <input id="termDate" name="termDate" type="text" class="form-control required">
                  </div>
              </div>
          </div>

      </fieldset>
    <h1>Reasons</h1>
    <fieldset>
        <h2>Reason for Leaving</h2>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>What is your reason for leaving?</label>
                    <input id="reasonLeaving" name="reasonLeaving" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>How do you feel about your pay?</label>
                    <input id="feelPay" name="feelPay" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>How do you feel about your progress here?</label>
                    <input id="progressHere" name="progressHere" type="text" class="form-control required">
                </div>
            </div>
       </div>
       <div class="row">
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Do you have another job?</label>
                    <input id="anotherJob" name="anotherJob" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-9">
                <div class="form-group">
                    <label>If yes, how does it compare with ours?</label>
                    <input id="compare" name="compare" type="text" class="form-control required">
                </div>
            </div>
       </div>
       <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Will you be receiving a higher salary at your new job?</label>
                    <input id="higherSalary" name="higherSalary" type="text" class="form-control required">
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label>What could we have done to prevent your leaving?</label>
                    <input id="preventLeaving" name="preventLeaving" type="text" class="form-control required">
                </div>
            </div>
       </div>
    </fieldset>

JS

<script>
    $(document).ready(function(){
        $("#form").steps({
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex)
            {
                // Always allow going backward even if the current step contains invalid fields!
                if (currentIndex > newIndex)
                {
                    return true;
                }

                var form = $(this);

                // Clean up if user went backward before
                if (currentIndex < newIndex)
                {
                    // To remove error styles
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }

                // Disable validation on fields that are disabled or hidden.
                form.validate().settings.ignore = ":disabled,:hidden";

                // Start validation; Prevent going forward if false
                return form.valid();
            },
            onFinishing: function (event, currentIndex)
            {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex)
            {
                var form = $(this);

                // Submit form input
                form.submit();
            }
        }).validate({
                    errorPlacement: function (error, element)
                    {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#password"
                        }
                    }
                });
   });
</script>

第一步

第二步（显示被截断的字段）

对此的任何帮助将不胜感激！

Answer 1

如果我理解你的问题，这是 jquery-steps 的一个老问题。此链接将包含大量信息和解决方案：https://github.com/rstaib/jquery-steps/issues/8#issuecomment-39273777。

我根据该链接中的 cmets 制作了自己的解决方案，您可以使用它，我认为它会很好地工作，因为它为我工作了一年多。

请执行这些修改：

1.创建一个名为jquery.steps.fix.js的文件。将下面的代码放在上面并加载它AFTER原始jquery.steps.js（或jquery.steps.min.js）。

function resizeJquerySteps() {
     $('.wizard .content').animate({
        height: $('.body.current').outerHeight()
    }, 'slow');
}

$(window).resize($.debounce(250, resizeJquerySteps));

2.您需要REPLACE原始jquery.steps.css的某些部分。

这里（认为它在第 140 行）：

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;

    // comment or remove this
    /*min-height: 35em;*/

    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

这里（认为它在第 163 行）：

.wizard > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;

    // comment or remove this
    /*height: 95%;*/

    padding: 2.5%;
}

3.现在你需要从插件的事件中调用我们的函数resizeJquerySteps()，准确的在onInit()，onStepChanging() em> 和 onStepChanged().

onInit: function(event, currentIndex) {
    resizeJquerySteps();
},
onStepChanging: function(event, currentIndex, newIndex) {
    resizeJquerySteps();
},
onStepChanged: function (event, currentIndex, priorIndex) {
    resizeJquerySteps();
}