resize content of smart-wizard (js library)

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 dont want that the scrollbar appears

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:

      // 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, 
        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        
        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

90 thoughts on “resize content of smart-wizard (js library)”

  1. 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.


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



Leave a Comment