Set overflow in dashboard layout

Question

I'm trying the set the overfloy-y: auto to the dashboard component, but the panel have more width and the bottom scroll appears because the right scroll takes that space, but the panels don't adapt to the scroll bar.

My dashboard component must adapt to height and width of the container (fill of a flex-column) and have the options to set the columns of the dashboard to 1 (like a sheet) , 4 and 8.

I shared some pictures of the css of the dashboard.

How can I set the overflow and the panel adapt to the width??

Attachment: Desktop_5f0016a0.7z

Indhumathy Loganathan · Answer

Hi Cesar, From the shared details, we understood that you want to render the panels to occupy the entire page. You can set the sizeX and sizeY values to render the panel as per your requirements and adjust the height of the panel by using the cellAspectRatio property. Check the below code snippet.

id="defaultLayout" 
    #defaultLayout 
    [panels]="panels" 
    [columns]="8" 
    [cellAspectRatio]="cellAspectRatio" 
> 
... 
  public cellAspectRatio: number = 1.05; Sample: https://stackblitz.com/edit/angular-6zjegb?file=app.component.ts Output: Please get back to us if you need any further assistance. Regards, Indhumathy L

Cesar Smerling · Answer

Hello, no the problem that I have is that the width of the panels takes more space than the width of the dashboard when the vertical scroll-bar is set.

Here is an example:

https://stackblitz.com/edit/angular-6zjegb-bsa4rc?file=app.component.html

I managed to fixit adding a <div></div> sorrounding the <ejs-dashboard>

sorrounding the

Keerthana Rajendran · Answer

Hi Cesar,  Thanks for the update. We are happy to hear that the issue is resolved. Please get back to us if you need any further assistance. Regards, Keerthana R.