We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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




1 Reply 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team March 27, 2023 11:39 AM UTC

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


Marked as answer
Loader.
Up arrow icon