How to make left sidebar and right content height auto fill 100%?

[lorryl]

I make a demo, I set the header is 50px, but the left sidebar and right grid height cannot be auto fill 100%, even if I set 100% to them.

I want sidebar and grid's height are all 100%,  is there a good method ? Please help me, thank you !

Attachment: demo_9fca2ecd.rar

[Deepa Loganathan]

Hi Lorryl,  

 

Thanks for contacting Syncfusion Support.  

 

We would like to let you know that the height of the sidebar component will be autmatically adjusted based on the content height when the target is specified for the Sidebar component. So here, you need to set height of the grid container (since grid is the main content of the sidebar) maually using a class selector based on the browser height as shown in the below code snippet.  

 

<div id="maincontent" class="content e-resizable" style="padding: 15px;">  

  <div>  

    <div class="title">Voucher List</div>  

    <div class="center-align">  

      <ejs-grid #grid [dataSource]='dataSource' [columns]='columns' [allowReordering]='true' [allowResizing]='true' [allowSorting]="true"  

       [height]="'100%'">  

  

      </ejs-grid>  

    </div>  

 

ngOnInit(): void {  

//Set the height for the Grid container by calculating the browser height dynamically using “window.innerHeight” and reducing the header height 50px;   

         (<HTMLElement>document.querySelector('.e-resizable')).style.height = (window.innerHeight - 50) + 'px';     

  

    }  

 

For your convenience, we have also updated the provided and attached it in the below link. Please check it.  

 

Link: https://www.syncfusion.com/downloads/support/forum/139711/ze/Demo_updated231251073   

 

To know more about responsiveness with grid component, please check the below link.  

 

Link: https://ej2.syncfusion.com/angular/documentation/grid/scrolling.html#responsive-with-parent-container   

 

Please let us know if you need any further assistance.  

   

Regards,   

Deepa L.