sipeng
Posts: 15
Joined: Thu Mar 14, 2024 10:46 pm

Dashboard Row/Component Height

Hello,

We are running into some issues on adjusting the dashboard component's height to accommodate to the screen size and the number of rows/components we are rendering.

One example here: https://jsfiddle.net/h0bufp25/. if we only render one component using dashboard on the screen, it does not take up the full screen size which we'd like to.

Is there's any way to
1. let the component take up the full screen height when the dashboard row height is smaller than the screen
2. keep the height as is when there's more rows and the total height of the rows exceeds the screen height

Thanks so much!
Attachments
Capture.PNG
Capture.PNG (46.68 KiB) Viewed 4461 times
User avatar
dawid.d
Site Moderator
Posts: 1122
Joined: Thu Oct 06, 2022 11:31 am

Re: Dashboard Row/Component Height

Hello,

Thanks for the question!

Dashboards are fully CSS-customizable in design, so you can set the minimum board height via CSS. Unfortunately, this sometimes becomes tricky due to conflict between inline styles and those set in the classes in the automatic layout.

You can get around this, for example, like this:
Demo: https://jsfiddle.net/BlackLabel/tdhzje5b/

You may also consider creating a custom layout: https://www.highcharts.com/docs/dashboa ... tom-layout

We are currently finishing work on a new DataGrid, which will be much more customizable and have much less inline styles. Then the work will focus on redesigning the layout and styling, introducing dynamic height, and making it easier to use CSS in a custom layout.

For this reason, if you have any comments, suggestions, or ideas, you can share them with us and we will take them into account in the product development process.

By the way, would you prefer Dashboards auto layout to use grid styling or would you rather stick with flex?

Best regards
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”