Adjusting Size on Steps so all fields will fit

Question

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?

In Js I tried adding somthing like this

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

Or like this:

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>

First Step

Second Step (showing fields being cut off)

Any help with this would be greatly appreciated!

Ricardo Vigatti · Accepted Answer · 2016-04-27T14:03:08.390

6

If i understood well your problem, this is an old issue of jquery-steps. This link will contain a lot of information's and resolutions: https://github.com/rstaib/jquery-steps/issues/8#issuecomment-39273777.

I made my own solution based on the comments from that link and you can use it, i think it'll work very well as it's working for me for over a year.

Please, perform those modifications:

1.Create a file named jquery.steps.fix.js. Put the code below on it and load it AFTER the original jquery.steps.js (or jquery.steps.min.js).

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

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

2.You'll need to REPLACE some parts of the original jquery.steps.css.

Here (think it's on line 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;
}

And here (think it's on line 163):

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

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

    padding: 2.5%;
}

3.Now you need to call our function resizeJquerySteps() from the events of the plugin, accurately at onInit(), onStepChanging() and onStepChanged().

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

edited Apr 27 '16 at 14:03

answered Apr 26 '16 at 19:52

Ricardo Vigatti

526
13
29

PS: i saw you're using bootstrap, just like me. Maybe you still face problems with the form validation and the height. Plz let me know if it happens, cause we're gonna to need to add a little bit more of code on the solution. – Ricardo Vigatti Apr 26 '16 at 19:59
We can chat, yes. But i don't know how to, kkk. – Ricardo Vigatti Apr 27 '16 at 13:43
kk, no problem. So, the resizing it's working as expected on the init event, its true? – Ricardo Vigatti Apr 27 '16 at 13:47
could this affect using radio buttons? – David Brierton Apr 27 '16 at 16:46
hmmm only special radio buttons with the css it looks like – David Brierton Apr 27 '16 at 16:47
do you use icheck with steps? – David Brierton Apr 27 '16 at 18:18
Not yet, but i will need to use soon – Ricardo Vigatti Apr 27 '16 at 21:04
ughhh its like the wizard content is preventing the radio buttons from being able to be selected – David Brierton Apr 27 '16 at 21:13
but if you take it out of the wizard it works just fine its so annoying i cant figure out how to overwrite the css – David Brierton Apr 27 '16 at 21:13
ricardo if you have time check out this question http://stackoverflow.com/questions/36898135/make-radio-buttons-over-power-background-image – David Brierton Apr 28 '16 at 13:38

Adjusting Size on Steps so all fields will fit

1 Answers1