I want to change the height (of the step div) dinamically but it do not work in any way that I tried. I need this because I have a table I insert data with ajax and it reload, this table is in datatable.

I already tried to change the height in css putting the height:auto; but it did not worked and the scrollbar always appears; here is the library smartwizard I use,

Follow the code to instance the smartwizar:

<script>
     $('#wizard').smartWizard({
      // Properties
        selected: 0,  // Selected Step, 0 = first step   
        keyNavigation: true, // Enable/Disable key navigation(left and right 
        keys are used if enabled)
        enableAllSteps: false,  // Enable/Disable all steps on first load
        transitionEffect: 'none', // Effect on navigation, 
      none/fade/slide/slideleft
        contentURL:null, // specifying content url enables ajax content loading
        contentURLData:null, // override ajax query parameters
        contentCache:true, // cache step contents, if false content is fetched 
      always from ajax url
        cycleSteps: false, // cycle step navigation
        enableFinishButton: false, // makes finish button enabled always
       hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead
        errorSteps:[],    // array of step numbers to highlighting as error steps
        labelNext:'Continuar', // label for Next button
        labelPrevious:'Voltar', // label for Previous button
        labelFinish:'Finalizar',  // label for Finish button        
        noForwardJumping:false,
        ajaxType: 'POST',
    // Events
        onLeaveStep: leaveAStepCallback, // triggers when leaving a step
        onShowStep: null,  // triggers when showing a step
        onFinish: null,  // triggers when Finish button is clicked  
        buttonOrder: ['prev', 'next','finish']  // button order, to hide a button remove it from the list
       });
</script>

I want to change the height (of the step div) dinamically but it do not work in any way that I tried. I need this because I have a table I insert data with ajax and it reload, this table is in datatable.

I already tried to change the height in css putting the height:auto; but it did not worked and the scrollbar always appears; here is the library smartwizard I use, https://github./mstratman/jQuery-Smart-Wizard

Follow the code to instance the smartwizar:

<script>
     $('#wizard').smartWizard({
      // Properties
        selected: 0,  // Selected Step, 0 = first step   
        keyNavigation: true, // Enable/Disable key navigation(left and right 
        keys are used if enabled)
        enableAllSteps: false,  // Enable/Disable all steps on first load
        transitionEffect: 'none', // Effect on navigation, 
      none/fade/slide/slideleft
        contentURL:null, // specifying content url enables ajax content loading
        contentURLData:null, // override ajax query parameters
        contentCache:true, // cache step contents, if false content is fetched 
      always from ajax url
        cycleSteps: false, // cycle step navigation
        enableFinishButton: false, // makes finish button enabled always
       hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead
        errorSteps:[],    // array of step numbers to highlighting as error steps
        labelNext:'Continuar', // label for Next button
        labelPrevious:'Voltar', // label for Previous button
        labelFinish:'Finalizar',  // label for Finish button        
        noForwardJumping:false,
        ajaxType: 'POST',
    // Events
        onLeaveStep: leaveAStepCallback, // triggers when leaving a step
        onShowStep: null,  // triggers when showing a step
        onFinish: null,  // triggers when Finish button is clicked  
        buttonOrder: ['prev', 'next','finish']  // button order, to hide a button remove it from the list
       });
</script>

• javascript
• height
• smart-wizard

3 Answers 3

Have you ever tried to add autoAdjustHeight: false in SmartWizard initialization?

Link to issue here.

try to find the class there like this

.form_wizard .stepContainer{
    overflow-x: hidden
}

remove this overflow it will not show scroll.

let me know if this solves. otherwise you need to adjust height of this class because smart wizard auto controls the height first when the function applied.

.smartWizard({})

Edited: but you can call this $("#wizard").smartWizard("fixHeight"); when you loaded the ajax so that it adjust new height.

Thanks.

So, I decided to resize the height of the visible content area every time I hid or unhid an element:

$(".tab-content").height("100%");