title: Adjusting Size on Steps so all fields will fit
body: <p>I am trying to figure out how I can adjust the background size based on what step the user is on so that all fields will show for each step. Is it possible to adjust the size based on what step they are on? I have tried css and js and am failing and just completely ruining the look I was going for. Can anyone guide me in how to make the background size go back and forth based on what step they are on?</p>
  
  <p>In Js I tried adding somthing like this<br></p>
  
  <pre><code>onStepChanged: function (event, currentIndex, priorIndex)
                  {
                      if (currentIndex === 2)
                      {
                          $(".wizard-big.wizard &gt; .content").css("min-height", "530px");
                      }
                  },
  </code></pre>
  
  <p>Or like this:</p>
  
  <pre><code>onStepChanged: function (event, currentIndex, priorIndex)
                  {
                      $(".wizard-big.wizard &gt; .content").css({
                          height: $("#div").height()
                      });
                  },
  </code></pre>
  
  <p><strong>HTML5</strong></p>
  
  <pre><code>&lt;form id="form" action="#" class="wizard-big"&gt;
      &lt;h1&gt;Employee&lt;/h1&gt;
        &lt;fieldset&gt;
            &lt;h2&gt;Employee Information&lt;/h2&gt;
  
            &lt;div class="row"&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Name&lt;/label&gt;
                        &lt;input id="name" name="name" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Date&lt;/label&gt;
                        &lt;input id="todaysDate" name="todaysDate" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Job Title&lt;/label&gt;
                        &lt;input id="title" name="title" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Department&lt;/label&gt;
                        &lt;input id="department" name="department" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="row"&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Date Hired&lt;/label&gt;
                        &lt;input id="hiredDate" name="hiredDate" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label&gt;Termination Date&lt;/label&gt;
                        &lt;input id="termDate" name="termDate" type="text" class="form-control required"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
        &lt;/fieldset&gt;
      &lt;h1&gt;Reasons&lt;/h1&gt;
      &lt;fieldset&gt;
          &lt;h2&gt;Reason for Leaving&lt;/h2&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;What is your reason for leaving?&lt;/label&gt;
                      &lt;input id="reasonLeaving" name="reasonLeaving" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;How do you feel about your pay?&lt;/label&gt;
                      &lt;input id="feelPay" name="feelPay" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;How do you feel about your progress here?&lt;/label&gt;
                      &lt;input id="progressHere" name="progressHere" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="row"&gt;
              &lt;div class="col-lg-3"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Do you have another job?&lt;/label&gt;
                      &lt;input id="anotherJob" name="anotherJob" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-9"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;If yes, how does it compare with ours?&lt;/label&gt;
                      &lt;input id="compare" name="compare" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Will you be receiving a higher salary at your new job?&lt;/label&gt;
                      &lt;input id="higherSalary" name="higherSalary" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;What could we have done to prevent your leaving?&lt;/label&gt;
                      &lt;input id="preventLeaving" name="preventLeaving" type="text" class="form-control required"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;script&gt;
      $(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 &gt; newIndex)
                  {
                      return true;
                  }
  
                  var form = $(this);
  
                  // Clean up if user went backward before
                  if (currentIndex &lt; 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"
                          }
                      }
                  });
     });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>First Step</strong>
  <a href="https://i.stack.imgur.com/a4jzG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a4jzG.png" alt="enter image description here"></a></p>
  
  <p><strong>Second Step</strong> (showing fields being cut off)
  <a href="https://i.stack.imgur.com/G8CLm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G8CLm.png" alt="enter image description here"></a></p>
  
  <p>Any help with this would be greatly appreciated!</p>