So I’ve read about others having issue with components overlaying each other and have tried to resolve the problems with their solutions with limited success. here is what is happening:
- Dash app has two rows of dropdown components (all dynamically populate fine)
- directly below the dropdowns is a graph (which also populates correctly based on the above DD selection values)
- Mode Bar Problem: The graph mode bar (menu for zoom, pan etc…) overlays the selection list of the dropdowns. a fix found is to set the .Select z-index to 1002 (one above the modebar’s 1001 default value.) this works fine problem resolved.
- Two Row Dropdown Problem: The above fix for the mode bar overlay causes a problem with the two rows of Dropdowns selectors. The top row of selectable values are displayed under the 2nd row dropdown component.
I’ve tried increasing/decreasing z-index or zIndex (camelCased) values inside of the external CSS file and within a ‘style’ section within the app.py file itself no luck…
Is there a a CSS fix for this, if so where exactly do I apply it? Any ideas?
Thanks in advance… Glen.