Smart-Wizard does not load first step

Question

So I am using smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard.

I have included it in js-popup, so when I open the popup it does not show the first step. I need go to the second step and then go back to see the first step

Answer 1

I had the same problem, what I did was download the smartWizard css, the smart_wizard_all.ccs version and in the last line of the file add:

.tab-content {
    height: auto! Important;
}

I hope it works for you. Sorry about my English I am using the google translator hahahaha, Greetings,

Answer 2

i escape this case by "onmouseenter" after call show modal.

<div id="modal" onmouseenter="call_wizard()">
     <div id="wizard" class="form_wizard wizard_horizontal">
       <!-- step 1,2,3,4 -->
     </div>
</div>
<!--$('#modal').modal('show');-->
<script>function call_wizard(){$('#wizard').smartWizard();}</script>

Answer 3

Not exactly a fix, but I found a workaround. Looks like the step-container initializes with height zero. Don't know why this happens, but we can override it in the css file. In the css file you are using to style your "Smart Form", look for a class called stepContainer.

.form_wizard .stepContainer {
   display: block;
   min-height:500px; // Add this line with your minimum height
   position: relative;
   margin: 0;
   padding: 0;
   border: 0 solid #CCC;
   overflow-x: hidden; } 

This should fix your problem until someone can explain why it happens in the first place.

Answer 4

I am getting the same kind of problem as element is previously hide and when I show that element then I am getting same problem so I tried this below code and its work for me

`$('[name = elementName ]').show(1000, function() { 
     $("#wizard").smartWizard("currentRefresh");
});`

Its actually load the fist step but it set its height to zero as its is previously hidden but after applying $("#wizard").smartWizard("currentRefresh"); it refresh the current step and set proper height.