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