react-step-wizard icon indicating copy to clipboard operation
react-step-wizard copied to clipboard

Hidden Steps Take Up Space When Not Shown

Open JJamour opened this issue 3 years ago • 1 comments

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:

Image of Issue

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; }

JJamour avatar Aug 13 '21 18:08 JJamour

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.

JJamour avatar Aug 13 '21 18:08 JJamour