Grid inside dialog problem.

[Wendell Gasparoni]

Hi, I'm having the following problem.

When the grid component is inside a dialog, and its height is set to 100%, then it overflows the parent element generating an undesirable scroll bar.

Here is the code that demonstrates it.

https://stackblitz.com/edit/angular-jjtos2?file=app.component.html

Obs: If I render the grid after the dialog is open, then its height is calculated correctly.

How can I fix this?

Regards,

Wendell Gasparoni.

[Ajith Govarthan]

Hi Wendell, 

Thanks for contacting Syncfusion support. 

We have checked the attached sample and able to reproduce the reported behavior at our end. To overcome the grid content you can set width as auto for the grid component which will not overflow the grid.  

For your convenience we have attached the sample so please refer the sample for your reference. 

Sample Link: https://stackblitz.com/edit/angular-jjtos2-c46exf?file=app.component.html 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Wendell Gasparoni]

Hi, this solution works partially, but the first example was a simplified one. I updated the code to represents a more real situation.

New example: https://stackblitz.com/edit/angular-jjtos2?file=app.component.html

The following problems realize with your solution:

1) The scrollbar will show up as soon as the content increase, and this scrollbar will be in the dialog and not in the grid component (we can manage this with "css flexbox" but yet has a second problem).

2) When the user removes any item from the grid, the confirm dialog is reduced in size, and the text cannot be read.

How can it be solved?

Regards,

Wendell Gasparoni.

[Ajith Govarthan]

Hi Wendell, 

Thanks for the update. 

Based on your requirement you have mentioned that you are facing scroller issue and also the confirm dialog content is not shown properly when you delete row. To overcome these issues you can use the *ngIf property to render the grid after rendering of the dialog component. 

So which will render the grid component with proper height and there will not be any additional scrollers.  Since Dialog and Grid are different components you can also set grid width based on the dialog component width to overcome the issue. 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/#getting-started 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Wendell Gasparoni]

Ok, thank you.

[Ajith Govarthan]

Hi Wendell, 

Thanks for the update. 

Please get back to us if you need any further assistance. 

Regards, 

Ajith G.