react-step-wizard
react-step-wizard copied to clipboard
Hidden Steps Take Up Space When Not Shown
In Style.css:
.step { opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0; }
.active { opacity: 1; pointer-events: inherit; position: relative; z-index: 1; }
You seem to toggle opacity to hide and show the steps of the wizard. When you have a long step (height wise) before a shorter step, the steps are all rendered on the page, but due to the tall step, you get a scrollbar on the very short step:
Is there any reason it's done this way, rather than setting the below which seems to work fine?:
.step { display: none; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0; }
.active { display: inherit; pointer-events: inherit; position: relative; z-index: 1; }
Just for the record setting 'isLazyMount' causes only one component to be rendered at a time which fixes the core issue without a style change, but I'm sure there would be some that would not want to enable that just to fix a CSS issue.