How to Hide navigation buttons in some steps

[arifsohail]

hi, i have a form and i want next and previous navigation buttons in some steps, while in some steps i dont want them to show,
i defined showNavigation false in step 2 as follow
i did following but it didnt work
const steps=[
{name: 'Step 1', component: <Step1 getStore={() => (this.getStore())} /> },
{name: 'Step 2', component: <Step2 showNavigation={false} getStore={() => (this.getStore())} />},
{name: 'Step 3', component: <Step3 getStore={() => (this.getStore())} />}
]
when i pass it in
it removes navigation altogether

but it is showing next button in step 2 and there is no syntax error
regards

[newbreedofgeek]

@arifsohail showNavigation is a setting for the entire StepZilla configuration. You can't use it for individual steps.

e.g.
<StepZilla steps={steps} showNavigation={false} />

Not sure why you want to turn off/on the next and previous buttons for certain steps but at this stage this is not supported by StepZilla via Config (as its a wizard component and Next and Prev buttons are the basic elements of this)

BUT...

You can achieve this using targeted CSS queries:

Make sure you give your elements classNames like Step1, Step2, Step3 etc (You can see this in the example code)
https://github.com/newbreedofgeek/react-stepzilla/blob/master/src/examples/Step2.js#L6

Then in your CSS file target the "footer-buttons" element of the Step you want to hide it and set it to hidden. For e.g if you want to hide the buttons in Step3 you can use this CSS query.

.step3 ~ div.footer-buttons {display: none}

Hope that helps...

[arifsohail]

thanks a lot, actually i was converting a pre build wizard into steps zilla components. ur component is working fine and producing my desired results. i need to revise the logic of steps i define
regards.

[newbreedofgeek]

Good luck...

[arifsohail]

.step3 ~ div.footer-buttons {display: none} work exactly right with a particular step thanks a lot