Help with the Html and CSS part of plotly dash

Dash Python
1

I’m really struggling with the html and css of Dash. I have a good sense of how Dash works overall and I can make interactive charts with plenty of callbacks.

What’s really giving me trouble is dealing with styling and structuring the divs. I struggled to figure out how to put two different charts side by side. Items from dropdown menus are messing up the layout of the whole dashboard.

In my research I can’t seem to find any good tutorials on how to properly utilizes the html/css capabilities in order to create beautiful and ergonomically designed dashboards. Plotly’s own docs barely address this.

Do I have to go and learn HTML and css?

Any help will be appreciated.

2

For setting up layout, I recommend using dash bootstrap components

3

So I don’t even need to bother with any of that html stuff, I can just dbc for pretty much everything?

4

For the most common things, you can use dbc, yes. However, while dbc is great, you might encounter specific use cases where custom css is needed.

5

@Emil is right. I use bootstrap layout (dbc.Col, dbc.Row) all the time because I think it’s the best way to make layouts. However, I have run into hard-to-debug troubles numerous times - mainly when using dash_table.

If I use dash_table in combination with bootstrap layout, I always include a custom css with

.dash-table-container .row {
  display: block;
  margin: 0;
}

I don’t know about other gotchas. Perhaps someone else will elaborate further.

6

I had some trouble earlier with the same problem.

Then I found https://grid.layoutit.com/ . which is extremely useful for visually laying out your app.
Once you are done you can just copy the css code on the right.
However depending on how you construct your project, you do have to translate the html code into dash friendly html.(tag) format.

Hope this helps.

1 Like
7

I found the hardest part about getting started with Dash was the layout. Took a day and really understood how to manage the layout with CSS (grid and flex) and it has become much much easier… specifically grid.

8

@bgivens33 Do you know about a good comprehensive resource you could recommend?