Issue with drop down list and graph's modeBar

Dash Python
1

Hi!

In the app I created I have a drop down menu on top of a graph and I have a problem with the graph’s modeBar popping up while browsing the drop down menu.
Below an image of the issue at hand:
modeBarPoppingUp

Is there a solution to have the modeBar not pop over the drop down options? In my case something like being able to change the modeBar position would work great!

Thanks!

2

As the header of @chriddyp supplied CSS template sugests:

/*
Source: https://codepen.io/chriddyp/pen/bWLwgP
By Chris P @chriddyp
*/
...
/* PLotly.js
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* 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;*/
/*}*/

add

.Select {
  z-index: 1002;
}

to your CSS file.

3

Hey!

Thanks a lot for your quick response. It worked with the modeBar but it created a new problem.
I happen to have two drop down menus above the graph and now the lower drop down menu is on top of the upper drop down menu while browsing the upper drop down menu.
Below a picture of the new issue that has been created:
dropDownsOnTopOfEachOther

Being not too familiar with web languages this issue is not easy to solve for me so help would be much appreciated!

-Henri

4

And actually in the current version of @chriddyp css there is a mentioning of a problem with drop down menus overlapping.

/* 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
 */

/* This was actually not quite right -
   dropdowns were overlapping each other (edited October 26)

.Select {
    z-index: 1002;
}*/

Is it possible to have two drop down menus above a graph without this kind of unintended overlapping?