Black Lives Matter. Please consider donating to Black Girls Code today.

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

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.

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.