Kendo Angular Dialog - Modal background not covering full height

[Bob]

Hi, I'm experiencing if a dialog is opened after the user has scrolled down from top of page.  When dialog opens, the darker modal background cuts off before bottom of page and goes to the lighter modal background.  Can you please provide some possible ways to resolve? Below is a very basic screenshot but illustrates the cut-off point.

[Zornitsa]

Hi Bob,

From what I can understand, when you open the Dialog after scrolling down the page, the modal overlay does not cover the entire viewport. Instead, it gets cut off, and a lighter background appears below. This can usually happen if the Dialog or its overlay is rendered inside a container that does not span the full viewport or if custom CSS affects its positioning.

Possible Solutions

Ensure Dialog is Rendered at Application Root

For the overlay to cover the entire screen, the <kendo-dialog> should be rendered at the root level of your application, not inside a smaller container or a component with restricted height. On that note, make sure the Dialog is not inside a container with limited height or overflow settings. The parent container should ideally cover the entire viewport.

Check Overlay and Container CSS

The overlay uses fixed positioning and should cover the viewport. If you have custom CSS, this can restrict its height. Thus, please check if there are any custom CSS styles that might affect the Dialog or its overlay. If such exist, you can try removing the styles for testing purposes to see if it will fix the observed issue.

Reference Example

You may find the example below, in which a similar scenario producing the expected behavior is implemented - there is a long content on the page, and after scrolling down and opening the Dialog, the overlay does not get cut off:

• https://stackblitz.com/edit/angular-v3taoinn 

Request for More Details

To provide the most accurate solution, could you please share:

• How are you rendering the Dialog (is it inside a specific container/component)?
• Is there any custom CSS applied to the Dialog overlay or its parent containers?

Let me know if these suggestions help or if you can provide more details about your implementation for further troubleshooting.

Regards,
Zornitsa
Progress Telerik