Hello I’m creating a CRUD application using Dash. I intend on making the application similar to the screenshot attached. The problem that I am having is that the dropdowns, the inputs and the datepicker all have slightly different styles and thus they are not aligning on the screen. I have been using bootstrap Zephyr and AnnMarie’s stylesheets. Is there a simple way to ensure the style of all these components match?
In addition can someone explain how do I know what classes/styles are available to use for a given dcc/dbc component? It seems as if some classes work for some components but not others. Added to my confusion is the fact that there is a ‘className’ property as well as a ‘class_name’ property for various components. What is the difference between the two?
Styling the dcc.Dropdown and the dcc datepickers is a little tedious because they have their own CSS bundled with the component. It’s possible to override it by using the dev tools to inspect the browser to find the class names used by the component. That’s how I made the “dbc” class to help style dash-core-components and the DataTable with a Bootstrap theme:
I agree that it still doesn’t look consistent enough. I’ll work on updating the “dbc” class so it looks better, but it will be a few days until I can get to it. If you find a solution before I do, please feel free to open an issue or PR, or post it back here
Regarding class_name vs className – It’s the same so you can use either. A while ago Plotly told component developers that they intended to change all the prop names to snake_case. The maintainers of dash-bootstrap-components library went ahead and made the change. Plotly still hasn’t done this and I’m not sure it’s still on the project list The className prop is marked as deprecated in the dbc library, but it will not be removed unless it is also removed in Dash.
The