Hi Darryl,
Greetings from Syncfusion support.
We have checked your reported problem that Dashboard Layout not aligned properly. DashboardLayout does not detect the changes from the Sidebar element. To achieve your requirement , you need to change the width of the DashboardLayout in Sidebar open and close event.
Refer the below code snippet.
|
onOpen(){
if(!Browser.isDevice) {
//290 denotes the sidebar width.
let parentElement : HTMLElement = document.getElementById("dashboardParent");
parentElement.style.width = "calc(100% - 290px)"
}
}
onClose(){
if(!Browser.isDevice) {
let parentElement : HTMLElement = document.getElementById("dashboardParent");
parentElement.style.width = "100%";
this.dashboard.refresh();
this.refreshContent()
}
} |
Refer the sample link.
Another way to achieve your requirement , you need to refresh() the DashboardLayout and it’s content element during DashboardLayout created and sidebar Close event.
In that case, DashboardLayout is rendered based on parent element dimension. Refer the below codes snippet.
|
onClose(){
setTimeout(() =>{
this.dashboard.refresh();
this.refreshContent()
},300)
}
onCreate() {
setTimeout(() =>{
this.dashboard.refresh();
this.refreshContent()
},300)
} |
Refer the sample link.
Refer the below links for DashbboardLayout component.
Please let us know, if you have any concerns.
Regards,
Sowmiya.P
