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

Filagree

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.

Pantia

#23799670 – Pantia

Note, also remove min-height: 35em; property from .wizard > .content – Filagree

Shamelessly stolen from github.com/rstaib/jquery-steps/issues/8#issuecomment-37063410 without even mentioning it – Roping

@bszom - It's not stolen. It's the same user repeating the answer instead of leaving a comment. Reputation avarice... – Tulley

@Tulley Haha. Yes, he's repeating the answer to his own question which he linked, and which is still verbatim copy and pasted from the GitHub issue comment. The correct thing to do would have been to paste the link to the answer instead of claiming it as one's own. I hope you see the irony in calling me a reputation avarice, because clearly I work very hard on my reputation. – Roping

i know its an old answer. but i tried it today. its not working anymore – Kai

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;}

Fancy

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

Jett

this creates a strange flicker as the step changes for me. I used @Arman answer above. – Reiterate

This recently worked for me using jQuery Steps v1.1.0 - 09/04/2014 – Kalikalian

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.

Virginity

After trying the weird (and stolen) marked answer without success, I tried with this one and worked perfectly. Just needed to add the CSS rules, not the script. – Tulley

This works perfectly, I want to say that if we add the "overflow: auto" rule, is a plus for mobile users. .wizard .content { min-height: 100px; overflow: auto; } – Defeat

only css rule does not work. what is "iframe" here in js and where are you calling it. – Kai

Answer 5

Add this to your custom CSS

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

Prytaneum

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; }

Ladykiller

Answer 7

just add this in your css

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

Melan

Answer 8

.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.

Burundi