Modebar appears on top of dropdown list

Dash Python
1

Not sure if this is a Dash or Plotly.js problem, but graph modebars render on top of dropdown items. This can be seen in the Oil and Gas dash app in the gallery, and can get pretty annoying if the modebar is wider than the dropdown.
2017-10-19_15-24-05 (1)

2

Ugh, yeah, this is annoying. Plotly.js’s z-index for the modebar is 1001. I’ve just modified the complementary Dash CSS to make the .Select z-index 1002: https://codepen.io/chriddyp/pen/bWLwgP

/* plotly.js's modebar's z-index is 1001 by default
 * https://github.com/plotly/plotly.js/blob/7e4d8ab164258f6bd48be56589dacd9bdd7fded2/src/css/_modebar.scss#L5
 * In case a dropdown is above the graph, the dropdown's options
 * will be rendered below the modebar
 * Increase the select option's z-index
 */
.Select {
    z-index: 1002;
}
3

I see that you have since commented out the change that you made. This problem still occurs. Do you know of a fix for it?

4

Also looking for a fix for this. Maybe worth adding an argument to dcc.Dropdown to directly manipulate the z-index of that component’s .Select-menu-outer directly?