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