The .content area should auto expand.

[simondoescode]

The .content area should auto expand and contract to accommodate the content. This would be a very welcome addition.

[rstaib]

Hi Simonn-,

Thank you first for your contribution.

I’m not sure if I understand your request correct. Please help me to get the right idea of what you really need. Am I right by thinking of auto height calculation so that the content fits at any time?

Cheers, Rafael

[simondoescode]

Hi Rafael, Thank you for getting back to me.

Yes you are right in thinking that auto height calculation should be added so that the content fits at any time. With smooth transitions.

Thanks, Simon

[rstaib]

Hi Simonn-,

Okay, good news for you. This is already a planned enhancement for the next version. I will close your feature request when releasing the next version.

Thanks again!

Rafael

[simondoescode]

Hi Rafael, Thats good news, when is the next version out?

Simon

[rstaib]

Hi Simon,

there is no fixed release date. I will inform you when it's out.

Rafael

[socialatm]

same issue so thanks in advance...

[socialatm]

In jquery.steps.css under .wizard > .content > .body remove position: absolute; and you're all set...

[rstaib]

Hi @twentyfiveautumn,

First, thank you for your contribution.

Yes, you're right as long as you're not using any transition effect that requires absolute positioning. One example for that is the slideLeft effect.

Cheers,

Rafael

[socialatm]

Hi Rafael. I understand what you mean. This just gets it so you can see the entire content. Not a complete fix for sure...

[janniconl]

This worked fine for me (still using position absolute). I've set min-heights for all of my steps (could also be height). Can be improved though.

    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "horizontal",
        onStepChanging: function (event, currentIndex, newIndex) {
            var nextStep = '#wizard #wizard-p-' + newIndex;
            var heightNextStep = $(nextStep).css('minHeight');
            $(nextStep).parent().animate({height:heightNextStep},200);
            return true; 
        }
    });

Example can be seen here: http://woonbewust-zonnepanelen.nl/zonnepanelen-rendement-berekenen

[bagofjuice]

Hi Rafael, just another request for this functionality as doesn't appear to be working in 1.0.4 released last month either.

[lgoudriaan]

@bagofjuice here a temp fix (little adjustment of @janniconl's code)

onStepChanged: function (event, currentIndex, priorIndex) {
    var nextStep = '#wizard #wizard-p-' + currentIndex;
    var totalHeight = 0;
    $(nextStep).children().each(function () {
        totalHeight += $(this).outerHeight(true);
    });
    $(nextStep).parent().animate({ height: totalHeight }, 200);
}

[bagofjuice]

Thanks, I have it working well in my scenario now (I have elements that show/hide within a step so a bit more logic added).

[tunhein]

Hi I resolved the issue like below:

I add a javascript function: function prepareStepsCss(currentIndex) { var newStep = 'wizard-p-' + currentIndex; $('div.content').removeAttr('id'); $('div.content').attr('id', newStep); }

And call that function from OnStepChanged:

$(wizardDivId).steps({ headerTag: "h5", bodyTag: "section", transitionEffect: "slideLeft", onStepChanging: function (event, currentIndex, newIndex) { return true;

    },
    onStepChanged: function(event, currentIndex) {
        prepareStepsCss(currentIndex);
    },
    onFinishing: function (event, currentIndex) {
      return true;
    },

    onFinished: function (event, currentIndex) {
        return true;
    }

});

function prepareStepsCss(currentIndex) { var newStep = 'wizard-p-' + currentIndex; $('div.content').removeAttr('id'); $('div.content').attr('id', newStep); }

In css: #wizard-p-0 { min-height: 26em; }

#wizard-p-1 { min-height: 30em; }

It works for me.

[tharban]

As I had asynchronously loaded content I had to modify

function loadAsyncContent(wizard, options, state) 

like (also padding was not dealt with with the suggestions all around - perhaps aboves does take care of that):

$.ajax({ url: currentStep.contentUrl, cache: false }).done(function (data)
{
    currentStepContent.empty().html(data)._aria("busy", "false").data("loaded", "1");

    var nextStep = '#wizard #wizard-p-' + state.currentIndex;
    var totalHeight = 0;
    $(nextStep).children().each(function () {
        totalHeight += $(this).outerHeight(true);
    });
    var padding = $(nextStep).innerHeight() - $(nextStep).height();
    totalHeight += padding;

    $(nextStep).parent().animate({ minHeight: totalHeight }, 200);
});

[rherring]

This is what I did...

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;
    $("html, body").animate({ scrollTop: 0 }, "slow");    // Ensures each page starts at the top
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight }, "slow");
});

[java2fun]

For vertical step by step accommodate the full content like this

updated jquery.steps.css file like below

1. line 146 update overflow: hidden ------> overflow: auto;
2. line 166 position: absolute ----- > delete

if you want to change min height update this 3) line 145 min-height: 35em; ----> as per requirements

[xxnull]

Thanks for all your support, when do you think about a new realease with this enhancenment? We wanna use this library but with that problem is impossible in our app, thanks

[rstaib]

Planned for version 2.0.0

[maltem-za]

Duplicate of https://github.com/rstaib/jquery-steps/issues/8

I would recommend @rherring's fix, but be aware that you also need to override/modify the CSS as follows:

.wizard > .content {
    min-height: 0;
}
.wizard > .content > .body {
    height: auto;
}

[volkanozyilmaz]

This problem is an unfortunate for this very useful library. I used @rherring's fix and @maltem-za's adds.

[soongsta]

here is my solution:

assuming standard height of 500px,

    onStepChanged: function (event, currentIndex, priorIndex) {
        console.log('currentIndex=' + currentIndex)
        var nHeight = "500px"; //<= default height
        if (currentIndex == 1) {
            var nHeight = "2000px"; //<= set new height here
        }

//example-basic is the name of the wizard $('#example-basic-p-' + currentIndex).parent().height(nHeight); }

[himalaym]

Just change .wizard > .content > .body{ position: absolute; } To .wizard > .content > .body{ position: relative; }

[Fredination]

I got also a problem ...

The content are different categories to choose and i have a (toggle "read more" button) for each category. So the content of each category switch down and you can read more.

The problem is it works perfectly when the content is not in the section. Inside the section, to create for example Step 1 it doesn´t work. Clicking the button works, but it doesn´t switch down.

Maybe somebody got an solution for me... thx

[izshreyansh]

This still isn't fixed. If i get time i'l be sure to send a PR soon.

[PaolitaGalarza]

En la última versión jQuery Steps v1.1.0 - 09/04/2014 con el asistente https://colorlib.com/etc/bwiz/colorlib-wizard-19/index.html Quite los estilos predeterminados y, además que la altura del contenido en cada paso se ajuste automáticamente. Me funcionó de la siguiente manera en el archivo css/style.css en lo siguiente:

1. comente las líneas desde 59 hasta la 82, esto es body, .main y .container
2. en la línea 212 en height: 410px; cambio por height: auto;, esto es en .content
3. en la línea 479 en height: 550px; cambio por height: auto;, esto es en @media screen and (max-width: 768px) > .content Y por último en el html después de la etiqueta
   , agregue algunos saltos de línea
   (se que no es la mejor forma), ya que los botones se sobreponían en el contenido.