Skip to content

dcc.Dropdown has inconsistent layout flow with other common input components #2653

Open
@ned2

Description

@ned2

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)

Which gives the this layout:
Screenshot from 2023-10-05 16-40-59

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)

Screenshot from 2023-10-06 02-29-21

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions