-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dcc.Dropdown has inconsistent layout flow with other common input components #2653
Comments
AfonsoFaleiro
added a commit
to AfonsoFaleiro/dash
that referenced
this issue
Jul 24, 2024
dcc.Dropdown has inconsistent layout flow compared to other common input components. The layout bug is normalised with CSS style display set to inline-block.
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe your context
Describe the bug
Many of the go-to Dash Core Components have the CSS style
display
set toinline-block
, with a notable exception ofdcc.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:
Which gives the this layout:
![Screenshot from 2023-10-05 16-40-59](https://private-user-images.githubusercontent.com/2831640/272954031-c4433223-e91a-4dcc-bcb8-ba9d57a72e66.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mjc4NjgwNDEsIm5iZiI6MTcyNzg2Nzc0MSwicGF0aCI6Ii8yODMxNjQwLzI3Mjk1NDAzMS1jNDQzMzIyMy1lOTFhLTRkY2MtYmNiOC1iYTlkNTdhNzJlNjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTAwMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDEwMDJUMTExNTQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDRmZWE4OTE2MTFiOWM5OTI5OGVkZWQ5Y2NiNzU3NTVhNmIyYTI5NzdlNTE2ZjBmNTIxYWY2NmRlZTlkOGRjNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.x1Yi_-2ZP_QcNvJQlmYSboAhe2LYdz37lRk4CH7Sb4Y)
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:
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.The text was updated successfully, but these errors were encountered: