Unplanned
Last Updated: 03 Feb 2026 12:51 by ADMIN
David
Created on: 28 Jan 2026 01:36
Category: Dialog
Type: Feature Request
3
Dialog should be responsive or expose maxWidth and maxHeight props

Hi,

At present the KendoReact Dialog is not responsive i.e. if the Dialog height is greater than the viewport height, the Dialog Action Buttons are not accessible e.g. https://stackblitz.com/edit/react-qcenpnxr?file=app%2Fapp.tsx

I have made a custom control to deal with this that attaches a resize event handler to the window, but there is no good way to add the viewport width and height as max dimensions to the Dialog:

  • style - applied to the "k-dialog-wrapper" div, any use of dimensions here completely ruins the presentation of the Dialog
  • contentStyle - applied to the "k-window-content k-dialog-content" div, does not prevent the Title or Action Buttons from exceeding viewport dimensions
  • ref - DialogHandle with "k-dialog-wrapper" div as the element

In order to make a responsive Dialog I have to take a ref to get the "k-dialog-wrapper" div, use a querySelector to get the "k-window k-dialog" div, and set the maxWidth and maxHeight styles there.

Unless there is a better way to achieve this, it would be good if the Dialog was responsive out of the box, or at the very least exposed maxWidth and maxHeight props directly.

Kind regards,

David

Attached Files:
1 comment
ADMIN
Yanko
Posted on: 03 Feb 2026 12:51

Hi, David,

I reviewed the Dialog, and there is no built-in way to set maxWidth or maxHeight for the Dialog. This is a valid feature request to provide such options built in.

As a workaround, you can set the max dimensions through CSS:

            /* Apply max dimensions  */
            .k-window.k-dialog{
                max-width: 250px;
                max-height: 250px;
            }

I prepared an example to showcase the above:

If further questions arise, do not hesitate to ask.

Regards,
Yanko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.