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

score 20 · Accepted Answer · edited Aug 02 '16 at 11:03

20

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.

edited Aug 02 '16 at 11:03

Ivanka Todorova

9,092
14
54
91

answered May 27 '14 at 20:18

krb

416
4
14

3

http://stackoverflow.com/questions/23799170/reducing-min-height-in-jquery-steps-plugin/23823065#23823065 – krb May 30 '14 at 11:52
1

Note, also remove min-height: 35em; property from .wizard > .content – sfuptown Sep 11 '14 at 20:00
7

Shamelessly stolen from https://github.com/rstaib/jquery-steps/issues/8#issuecomment-37063410 without even mentioning it – bszom Oct 22 '14 at 14:59
Thank You! You got new +1 :) – X9DESIGN Jul 29 '15 at 22:45
@bszom - It's not stolen. It's the same user repeating the answer instead of leaving a comment. Reputation avarice... – Manolo Mar 04 '16 at 21:03
@Manolo 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. – bszom May 16 '16 at 09:47
i know its an old answer. but i tried it today. its not working anymore – Heemanshu Bhalla Jan 21 '20 at 16:08

score 16 · Answer 2 · answered Apr 15 '18 at 02:32

16

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

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

answered Apr 15 '18 at 02:32

Arman Hakim Sagar

274
4
6

score 11 · Answer 3 · answered Dec 06 '15 at 08:37

11

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.

answered Dec 06 '15 at 08:37

Eric

2,093
1
27
43

2

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. – Manolo Mar 04 '16 at 20:59
1

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; } – Fernando Aguilar Sep 03 '19 at 15:01
only css rule does not work. what is "iframe" here in js and where are you calling it. – Heemanshu Bhalla Jan 21 '20 at 16:11

score 9 · Answer 4 · answered Mar 27 '18 at 15:16

9

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

answered Mar 27 '18 at 15:16

Oussama

534
4
12

this creates a strange flicker as the step changes for me. I used @Arman answer above. – PowerMan2015 Sep 28 '20 at 16:20

score 0 · Answer 5 · answered May 28 '21 at 05:26

0

Add this to your custom CSS

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

answered May 28 '21 at 05:26

Ali akhound

1

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

5 Answers5

Linked