I am having problems displaying dropdown menus on my choropleth plot. Currently I have three dropdown menus laying out horizontally on top of the choropleth and displaying okay. But, when I click on them, the dropdown menu texts do not show up, the dropdown boxes show up at random places or flickers. I think it might have something to do with choropleth mouseover having higher priorities than dropdown menu displays. How do I fix that?
app.layout = html.Div(children=[
html.H1("A Story of Life and Death", style=text_style),
html.H3("CHSI Cause of Death Visualization, 1996-2003", style=text_style),
html.Div(children=[
html.Label('Age Group', style=text_style),
dcc.Dropdown(
id='ages',
options=[
{'label': 'Under 1 Years Old', 'value': 'A'},
{'label': '1 - 14 Years Old', 'value': 'B'},
{'label': '15 - 24 Years Old', 'value': 'C'},
{'label': '25 - 44 Years Old', 'value': 'D'},
{'label': '44 - 64 Years Old', 'value': 'E'},
{'label': '65+ Years Old', 'value': 'F'}
],
multi=False,
value='D'
),
html.Label('Ethnic Group', style=text_style),
dcc.Dropdown(
id='ethnicities',
options=[
{'label': 'White', 'value': 'Wh'},
{'label': 'Black', 'value': 'Bl'},
{'label': 'Hispanic', 'value': 'Hi'},
{'label': 'Other', 'value': 'Ot'},
],
multi=False,
value='Wh'
),
html.Label('Age Group', style=text_style),
dcc.Dropdown(
id='cods',
options=[
{'label': 'Birth Complication', 'value': 'Comp'},
{'label': 'Birth Defect', 'value': 'BirthDef'},
{'label': 'Injury', 'value': 'Injury'},
{'label': 'Suicide', 'value': 'Suicide'},
{'label': 'Cancer', 'value': 'Cancer'},
{'label': 'Homicide', 'value': 'Homicide'},
{'label': 'Heart Diseases', 'value': 'HeartDis'},
{'label': 'HIV', 'value': 'HIV'}
],
multi=False,
value='Homicide'
)], style={'columnCount': 3}),
dcc.Graph(id='choropleth')
])