search

jcmcneal / react-step-wizard

A modern flexible step wizard component built for React.
MIT License
583 stars 126 forks source link

Hidden Steps Take Up Space When Not Shown #89

Open JJamour opened 3 years ago

JJamour commented 3 years ago

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 commented 3 years ago

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.