Auto-adjust height of the dashboard layout panels based on the content

3 Replies
4 Participants

Created by
PA Paritosh

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
DashboardLayout

Created On
Mar 7, 2020 08:42 AM UTC

Last Activity On
Jul 1, 2020 08:28 AM UTC

Want to subscribe?
SIGN IN

We are using dashboard layout for our project and we use multiple panels to present relevant information for users on their dashboard. Is it possible to auto-adjust the height of the panel based on the content?

We have multiple bootstrap 4 cards that we render inside one of the panels and we may have 2-20 cards to show in the panel. What we would like to do is for the panle to auto adjust its height so the content always stays withing the panel and not overflows it.

See attached image for what i am looking for.

Thanks

Attachment: Capture_79bcd5e2.zip

3 Replies

SP Sowmiya Padmanaban Syncfusion Team March 9, 2020 12:49 PM UTC

Hi Paritosh,

We have checked your attached screenshot. We would like to inform you that, the Dashboard Layout panels rendered based on fixed dimension (SizeX and SizeY property) . It doesn’t render based on the content of the panels.

If the content is overflows, you can display the scroll bar by using the below code.

<style>

.e-panel-content {

overflow:auto;

}

</style>

Refer the below sample link for your requirement.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout1294630203.zip

Please let us know, if you need any further assistance.

Regards,

Sowmiya.P

PR Prasanth June 30, 2020 08:45 AM UTC

Hi Team,

I have set panel size "sizeY": 2, but after that my panel height is too long and if i set 1 its too small how i can set size between this two range ? can you help me

MK Muthukrishnan Kandasamy Syncfusion Team July 1, 2020 08:28 AM UTC

Hi Prasanth,

Thanks for contacting Syncfusion support.

We have validated your requirement in Dashboard Layout component. We would like to let you know that, we have provided columns property for Dashboard Layout component. The sizeX and sizeY properties depends on the columns property. The panels sizeX and sizeY will be changing based on the columns property.

The Dashboard Layout is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each row is defined using the columns property of the component. The width of each cell will be auto calculated based on total number of cells placed in a row and the height of a cell will be same as that of its width. Panels will occupy any single or collection of cells(row * column) with in its parent dimension.

So, it is not feasible to auto-resize of a dashboard panel to adapt the dimension of its content dimension. To do so, you can either set sizeX and sizeY values to adapt its content within in the panel on initialization or dynamically.

https://ej2.syncfusion.com/documentation/dashboard-layout/setting-size-of-cells/

<ejs-dashboardlayout id="defaultLayout" columns="6" cellSpacing="new double[] { 10, 10 };">

<e-dashboardlayout-panels>

<e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">