Centering KendoReact Dialog Within Parent Component

Updated on Jan 30, 2026

Environment

Product Version	13.3.0
Product	Progress® KendoReact Dialog

Description

I want to constrain and center the KendoReact Dialog within its parent component rather than centering it on the entire page. By default, the Dialog uses position: fixed CSS, causing it to be centered relative to the viewport. I need the Dialog to appear near the area where it was triggered for better user experience.

This knowledge base article also answers the following questions:

• How can I position a KendoReact Dialog relative to its parent container?
• How do I use the appendTo property of the KendoReact Dialog?
• How can I make a KendoReact Dialog appear near the trigger event?

Solution

To center the KendoReact Dialog inside a parent component, follow these steps:

1. Set the appendTo property to null to render the Dialog within its parent container instead of the document body.
2. Override the Dialog's style property to adjust its position using position: absolute.
3. Ensure the parent container has position: relative set.

Change Theme

Theme

Loading ...

Key Details

• appendTo={null}: This renders the Dialog within its parent container instead of appending it to the document body.
• position: absolute: This positions the Dialog relative to its nearest positioned ancestor (the parent container with position: relative).
• transform: translate(-50%, -50%): Combined with top: 50% and left: 50%, this contains the overlay within the parent.

See Also

• KendoReact Dialog Overview
• Dialog appendTo Property