stepContainer does not grow with dynamic content

[elroyshilling]

Hi there,

I have tested the wizard with Ajax content loading: the stepContainer does not grow with dynamic content???

Removed height:300px; still no luck.

Moving a step backward and returning to the previous step seems to autogrow the content but not inside current Container while loading dynamic ajax content?

[mstratman]

Thanks for the report. Can you please try calling the fixHeight method to see if it remedies the problem? Not that this should necessarily be the solution, but it might help give you a workaround, as well as provide some valuable information to track down the root of this problem.

For example, tie it to a button and push it after the ajax is done and the display is messed up:

<input type="button" id="fixheight" value="try fixHeight" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixheight").click(function() { $("#wizard"). smartWizard("fixHeight"); });
    });
</script>

[elroyshilling]

Thanx for the prompt response...

Your suggestion helps:

Only problem now is my content is dynamic and I can't predict the height, so setting it to a fixed height wont always work.

However, if I load the page or use the steps it sets the height of the DIV correctly.

I'm using server side code to load a dynamic table using Jquery and a few drop down boxes which is initialy hiddin on page load and only triggers onChange, as you can imagine the DIV grows and pushes the table down but the wizard remains at the same height.

It would be great If I can trigger the wizard to the correct height using the onChange function or find a way to refresh the wizard while still in the Step (Silent Reload)

[mstratman]

Please try that snippet with the "fixHeight" method, and let me know if it works. That snippet should dynamically resize your wizard to fit the contents inside of it.

[elroyshilling]

Sorry for taking your time..

Firebug error: "FixHeight" method is undefined...not sure where to set it?

[mstratman]

Please try pasting the exact snippet I showed. The upper/lower case makes a difference:

<input type="button" id="fixheight" value="try fixHeight" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixheight").click(function() { $("#wizard"). smartWizard("fixHeight"); });
    });
</script>

[ravnan]

i tried this code out but does not fix my problem, please suggest how to fix the problem fixHeight on document.ready gives error "uncaught exception: Method fixHeight does not exist"

[Shildrak]

fixHeight works for me if I change it to var selStep = this.steps.eq(this.curStepIdx); this.elmStepContainer.height(_step(this, selStep).outerHeight());

[jahon07]

I am using the older version of your code. There isn't anything like "fixHeight". So, after some fighting with your code, I "fixed" the issue by adding this:

    
    $('.stepContainer img').load(function() {
        $(".stepContainer").height($(".stepContainer").find("div:not(:hidden)").height());
    });
    

Which means, after loading all images in content block, we'll update the height once more. Of course, it may not be so universal. But it solved my problem.

Thank you for an amazing work, btw. Despite there are some bugs, it was useful.

Good luck.

[zepernick]

I came across this same issue and fixHeight worked great! The one thing that might be confusing to some is the download here http://techlaboratory.net/smartwizard is version 2.0 which does not have the fixHeight method. I had to download from the master branch to update. You may want to consider just redirecting that download on techlaboratory over to github. Thanks for all you work on the wizard!

[mstratman]

Please write to the author and recommend he set up the redirect.

That's not my page. I set up this repo as a fork from his work.

[StateBarofArizona]

Having the same issue, tried your test button. The step does resize but not large enough to fit all the content. It seems to be short by 10 pixels.

[StateBarofArizona]

I was able to play with the values and get it to look good in IE and Firefox. However, Chrome acts like it's just ignoring FixHeight. It never reads the correct height of the elements in the div.

[G00sfraba]

Hello, I can see that this isn't fixed yet. I was able to reproduce it on my own site (currently in development). The problem is as follows: The wizard is setting the height of the stepContainer with the following line: $this.elmStepContainer.height(_step($this, selStep).outerHeight());

Now this is ok if you have preloaded the content in the step before the initialization. The problem comes when you are changing the content with ajax requests. The ajax is always slower (because it is AJAX huh ) and the stepContainer is empty and/or with less content. The moment the AJAX response is received and we set the content, based on the response, the height of the step container is not REcalculated.

Have in mind, that I am changing the content by my own AJAX requests which are not connected with the SmartWizard.

So this is where the problem occures. Change the content of the smart wizard step, with AJAX, with something bigger and it won't change the height of the wizard stepContainer itslef.

I've commented out this line: $this.elmStepContainer.height(_step($this, selStep).outerHeight()); Also set the animation to none - transitionEffect : 'none'.

And now everything is fine with my wizards.

[wobblymusic]

The original version of this script is still being maintained. It includes an autoAdjustHeight parameter which, if you set to false, fixed all the height problems I was having. More info