How to set DashboardLayout component height and width to 100% of the parent container height and width

[Aruna]

I'm trying to set my DashboardLayout component to occupy the 100% of height and width of it's parent container.

Is that possible ? Below blue line is the parent container border, red is the  DashboardLayout border.

Here is the stackblitz sample. https://stackblitz.com/edit/angular-3kcy8x?file=src/app.component.css

[LeoLavanya Dhanaraj]

Hi Aruna,

Greetings from Syncfusion support.

Based on the details you shared, we understand that you wish to set the height and width of the DashboardLayout component to 100% of the parent container's dimensions. To achieve this, you can utilize the CellAspectRatio property to adjust the height of the cells within the Dashboard Layout component. This attribute determines the ratio of the cell's width to height, which can help to avoid the display of a vertical scroll bar. Additionally, you need to set the height of the component to 100.

Also, In your sample, you had given the column value of 5, but you have only rendered panels for 4 columns. Therefore, the extra space for panel rendering is allocated in your application. To remove the extra space in the Dashboard Layout, we have set the column value as occupied by the panels in the Dashboard. For your reference, we have included the modified Angular Dashboard sample.

Check out the below mentioned code snippets for further assistance.

Sample : https://stackblitz.com/edit/angular-3kcy8x-wotupp?file=src%2Fapp.component.html,src%2Fapp.component.ts

[app.component.html]

<ejs-dashboardlayout

    id="default_dashboard"

   columns=”4”

    #default_dashboard

    ...

    [cellAspectRatio]="cellAspectRatio"

> ...

</ejs-dashboardlayout>

 

[app.component.ts]

public cellAspectRatio = 1.03;

 

[app.component.css]

#default_dashboard {

 height: 100% !important;

}

Also, check out the below links to know more about the CellAspectRatio property in the Dashboard Layout component.

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

API : https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/#cellaspectratio

Regards,

Leo Lavanya Dhanaraj

[Monty Khurana]

Hi Team,

I am also facing similar kind of issue. I noticed that in your provided solution as well, the panels are going outside of the dashboard-layout. Combined width and height of panels are more than the height and width of the dashboard-layout.

I can share some screenshots as well.

Thanks & Kind Regards
Monty Khurana

Attachment: Archive_8545c838.zip

[Monty Khurana]

Hello again.

I also noticed one more thing. Although, as of now, i do not have resize of panels feature implemented in my project but when i resize my whole browser window where dashboard is present, after a while my whole browser window freezes. I have to close the window and open a new one. Is this because of cellAspectRatio?

Can you please check and share your inputs?

Thanks & Kind Regards
Monty Khurana

[Vishwanathan Muruganantham]

Hi Monty,

We have reviewed your query and understand that your panel width exceeds the parent width. We would like to clarify that this occurs due to border styles applied at the sample level, causing the dashboard to render starting after the border, which results in the panel width exceeding the parent.

Please refer this screenshot for better understand the issue,

For your second query, we were unable to replicate the issue. Please share a video demonstrating the issue along with any custom code used in the sample. These details will help us provide a prompt solution.

Sample: https://stackblitz.com/edit/angular-6vdkro-4tenbi?file=src%2Fapp.component.html

Best Regards,
Vishwanathan