How to set a dynamic height on content for each step?

Question

I'm using Jquery steps wizard plugin. The problem I am having is that each step of the wizard has content of a different height. The css included with the examples to control the height for the content is

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

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

I have tweaked the min-height and overflow properties, but it still doesn't do what I want to accomplish. What I want is the height to be only high enough to accommodate the content for each step.

For example, say I have 2 fields for step 1 and 10 fields for step 2. In the examples the content is all the same height so it looks terrible having a much larger height than is necessary for the 2 fields to accommodate the 10 fields on step 2.

If I remove the min-height property, no content shows at all. Does Jquery steps require a fixed height to work for all steps? I'm hoping there is a way to make the height dynamic to accommodate the height of each individual step.

Thank you

Answer 1

Remove the height property for the below class in jquery.steps.css:

.wizard > .content > .body{height:95%;}

In the - jquery.steps.js search for:

stepTitles.eq(state.currentIndex)
  .addClass("current").next(".body").addClass("current");

Should be around line 844. Directly after, add:

stepTitles.eq(state.currentIndex).next(".body")
    .each(function () {
    var bodyHeight = $(this).height();
    var padding = $(this).innerHeight() - bodyHeight;
    bodyHeight += padding;
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight }, "slow");
});

The issue will be surely resolved.

Answer 2

Just a single line css works for me. It will automatically adjust your height for every section

.wizard > .content > .body{ position: relative !important;}

Answer 3

If someone finds this after all those years, the problem is still here. Here is how to fix it without updating javascript, using only css:

.wizard .content {
    min-height: 100px;
}
.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 15px;
    position: absolute;
}
.wizard .content .body.current {
    position: relative;
}

src: https://github.com/rstaib/jquery-steps/issues/8#issuecomment-368114763

Answer 4

I think these existing answers are a bit dated; the css file looks much different. A link posted in some other comments seemed to work for me.

Basically, you find these blocks in the validate css and make them look like this:

.wizard .content {
    min-height: 100px;
}
.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
}

And fit this in with your javascript:

$(document).ready(function() {
    function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

Worked like a champ for me. Quite surprised this isn't already part of the extension.

Answer 5

Add this to your custom CSS

.wizard > .content > .body {position:relative !important;}

Answer 6

Based on the other answers, only adding this line was not enough :

.wizard > .content > .body { position: relative !important;}

Make sure to also add this one and it will do the trick :

.wizard > .content { min-height: inherit !important; }

Answer 7

.wizard .content > .body.current {
 width: 100%;
 height: auto;
 padding: 15px;
 position: relative;
}

By using this way, you will prevent errors in animation, it will only make the displayed page relative and become absolute again while scrolling.