Dash, help with flexbox and front end 101s

Dash Python
1

Hello,

I am creating a Dash layout with flexboxes. They are quite useful. However, I am having trouble resizing charts to fill the space equal to a Dash card, because I am not aware of the default size of the graphs / cards / row elements. This has created a situation like the following:

fifty
fifty1120Ă—368 39.2 KB

where the two charts on the right should each be half of the height, but I am not sure of the row height of its parent, as that is automatically set by Dash in other areas of the dashboard.

While I could manually set it, before I do I was curious if anyone knows of:

  • the default row height in Dash, for cards, charts, or rows?
  • a way to infer the height using css?

Thank you!

2

Hi @plotmaster422

It would be easier to help if you posted code rather than an image :slightly_smiling_face:

1 Like
3

I know, but so much more work!

In any case, I found the solution, description of which is here: Autoscale Graph Problem in Card - #2 by jlfsjunior

It looks like one must explicitly style the graph to be the desired height, and this is best practice across graphs. This can be done either by using either the inline style={“height”: 600px} or by using a className and setting the height explicitly there. I chose to use a className, subtract any difference in the margin and padding, and it came out fine.

height_matching
height_matching1048Ă—514 54.6 KB

Thanks!