resize content of smart-wizard (js library)

Question

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.com/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>

score 6 · Answer 1 · answered Jul 19 '18 at 15:15

6

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

Link to issue here.

answered Jul 19 '18 at 15:15

cleybertandre

301
4
8

man,you completely solved my problem.thanks a lot – Ruhith Udakara Nov 29 '20 at 17:52

Mian Almas · Answer 2 · 2017-09-22T16:09:32.710

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.

.smartWizard({})

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

Thanks.

edited Sep 22 '17 at 16:09

answered Sep 22 '17 at 15:41

Mian Almas

174
3
11

I already fixed it in this same way you mencioned, but I put the overflow-x: hidden in html tag and it worked well, but I know if this page turn out more big so it cant be flexible because the height is fixe, no problem until found another way to solve, for while overflow-x: hidden worked, thanks – Luciano Sep 23 '17 at 11:55

score 1 · Answer 3 · answered Feb 17 '21 at 22:50

1

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

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

answered Feb 17 '21 at 22:50

Dan

487
5
19

resize content of smart-wizard (js library)

3 Answers3