I’m trying to change the height of dropdown components that are grouped together. I searched the forum and found this post: Dcc.dropdown change height, but I’m still having issues: The dropdowns are not changing, rather they are just getting overlapped.
Here is a minimal example with screenshot:
import dash
import dash_html_components as html
import dash_core_components as dcc
dropdown_options = [
{'label': 'foo', 'value': 'foo'},
{'label': 'bar', 'value': 'bar'},
{'label': 'baz', 'value': 'baz'}]
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.Div(
id="dropdown-container",
children=[
dcc.Dropdown(
options=dropdown_options,
value='foo',
style={'height': '15px'}
),
dcc.Dropdown(
options=dropdown_options,
value='foo',
style={'height': '15px'}
),
],
style={'display': 'inline-block'})
])
app.run_server(debug=True)