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

[Paritosh]

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

[Sowmiya Padmanaban]

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 

[Prasanth]

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 

[Muthukrishnan Kandasamy]

 

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>"> 

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

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

            </e-dashboardlayout-panel> 

        </e-dashboardlayout-panels> 

    </ejs-dashboardlayout> 

 

We have attached sample for your convenience, which can be downloaded from the below link. 

 

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

 

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

 

Regards, 

Muthukrishnan K