FileManager height

[Manuel]

Dear Support,

is it possible to have FileManager control filling the available space inside a div?

We have a situation like this:

<div style="height: 100%">

     <div class="header">

          Some stuff here

     </div>

     <div class="content">

          File manager here (there is free space between filemanager and the end of the content bottom border)

     </div>

     <div class="footer">

          Some stuff here (aligned to bottom)

     </div>

</div>

Of course the solution must be dynamic, we cannot se a fixed height to the control.

Look forward to your reply.

Best regards

[Shalini Maragathavel]

Hi Manuel, 

Greetings from Syncfusion support. 

                                                                                                                                         

Based on your query, we suspect that you need to render the File Manager component for the whole div element height. You can achieve this requirement by setting height property of the File Manager as 100% and the height of File Manager’s parent element according to the height of header and footer element. File Manager will be rendered based on the dimensions of its parent container. This is demonstrated in the below code snippet, 

  

App.component.html  

<div style="height: 100%"> 

  <div class="header"> 

    Some stuff here 

  </div> 

<div class="content" style="height: 92%"> 

    <ejs-filemanager id="overview" [height]="height" [ajaxSettings]="ajaxSettings"[view]="view"> 

  </ejs-filemanager> 

  </div> 

  <div class="footer"> 

    Some stuff here (aligned to bottom) 

  </div> 

</div> 

---------------------------------------------- 

App.component.ts 

export class AppComponent { 

    public height:string="100%"; 

    public ngOnInit(): void { 

        . . . 

       } 

--------------------------------------------- 

App.component.css 

html,body{ 

  width:100%; 

  height:100%;  

  margin:0; 

} 

Please refer the below sample for your reference. 

  

Sample: https://stackblitz.com/edit/angular-kzhock-wvjaiv?file=app.component.ts
  

Please, refer to the below links for more information on File Manager component.  

  

UG Documentation- https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/
  

Demo link: https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html

Please get back to us if you need further assistance.
  

Regards,   

Shalini M.