Z-index (zIndex) overlay issue, Need assistance!

Dash Python
1

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)

Problem:

  • 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.

2

After more research I found a solution that seems to have solved both problems:

.Select-menu-outer {
z-index: 1002;

added to the external CSS file. This fixes the overlay issue of the Mode Bar from the graph & the overlay issue when two rows of dropdowns are used.