Description
Describe your context
dash 2.13.0
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0
Describe the bug
Many of the go-to Dash Core Components have the CSS style display
set to inline-block
, with a notable exception of dcc.Dropdown
. This means that without any custom styles, the dropdown component has inconsistent layout flow compared to other input controls it's likely to be found with. I know I can style the component to fix the issue, but this seems like overkill for simple demos where you just need some controls next to each other, and would be confusing for people getting started with Dash.
Here's an example:
from dash import Dash, dcc, html
app = Dash(__name__)
app.layout = html.Div(
children=[
html.Label("Dropdown"),
dcc.Dropdown(),
dcc.DatePickerRange("DatePickerRange"),
html.Label("DatePickerSingle"),
dcc.DatePickerSingle(),
html.Label("Input"),
dcc.Input(),
],
)
app.run(port=8050)
This inconsistent flow layout that comes out of the box is too jarring, even for throwaway demo code, so I inevitably end up adding manual styling just for that one component to normalise things a bit:
app2 = Dash(__name__)
app2.layout = html.Div(
children=[
html.Label("Dropdown"),
dcc.Dropdown(
style={
"display": "inline-block",
"width": 300,
"vertical-align": "middle",
}
),
dcc.DatePickerRange("DatePickerRange"),
html.Label("DatePickerSingle"),
dcc.DatePickerSingle(),
html.Label("Input"),
dcc.Input(),
],
)
app2.run(port=8051)
I'm wondering if there would be any appetite for trying to normalise the layout flow for dcc.Dropdown
? I know there's the impact on the many existing Dash apps out there to consider, but I do think it would make for a better experience, also for people getting started with Dash too.