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:
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
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.