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
close icon

Dashboard Layout resize while parent div resize(responsive)

Hi Team,

I am using Dashboard Layout in Child component(Angular 8) and I have parent component with  Sidebar on left with Type as push.

When I am loading the page Sidebar will be in Open state, Dashboard Layout loading in remaining full screen, but when sidebar closed Dashboard Layout not utilizing full available space.

How can achieve this functionality, I have tried updatepanel & resizepanel methods, but nothing worked out.

Could you please provide some sample or code snippet to resolve the issue.

Thanks,
Shiva 

1 Reply

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 2, 2020 08:50 AM UTC

Hi Shiva, 
 
Greetings from Syncfusion support. 
 
We have checked your reported query that Dashboard Layout is not aligned properly during sidebar open and close. To achieve your requirement, you have to adjust the width of dashboard layout component during open and close of sidebar element using its open() and change() events. 

Refer the below code snippet for achieving your requirement. 
 <ejs-sidebar id="sidebar-treeview" class="dock-menu" #sidebarTreeviewInstance [width]='width' 
                    [mediaQuery]='mediaQuery' [target]='target' (open)="onOpen($event)" (change)="onChange($event)"> 
 </ejs-sidebar> 

    onOpen(){ 
      if(!Browser.isDevice) { 
      let parentElement : HTMLElement = document.getElementById("dashboardParent"); 
      // 290 px is the width of the sidebar element. 
      parentElement.style.width = "calc(100% - 290px)" 
      } 
    } 
    onChange(){ 
      if(!Browser.isDevice) { 
      let parentElement : HTMLElement = document.getElementById("dashboardParent"); 
      parentElement.style.width = "100%"; 
      this.dashboard.refresh(); 
      } 
    } 

  
For your reference, we have prepared a simple sample to achieve your requirement. Refer the sample link below. 


Please let us know, if you need any further assistance. 
  
Regards, 
Shameer Ali Baig S.

Loader.
Live Chat Icon For mobile
Up arrow icon