Response Layout

[Shane]

    Is there a way to make the dialog responsive? The api says that it only takes pixels as the height/width, but I do not want to hard code pixels.

[Dimiter Topalov]

Hello Shane,

The default behavior of the Dialog component is to resize alongside the viewport when the viewport is becoming smaller. You can also implement some custom logic for setting the Dialog width dynamically based on the viewport size (and during resizing), e.g.:

https://stackblitz.com/edit/angular-pqgyhg-nubcfz?file=app/app.component.ts

The example above demonstrates creating a service that will provide dialog width as a percentage of the available viewport width, so that multiple Dialogs can consume the same calculated value. You can further customize the widths of separate Dialogs (if necessary) by adjusting the value, provided by the service by a custom scaling factor.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Mark]

Have there been any changes to this since 2019? While I objectively understand what this solution does, I don't think it's a very graceful handing of UI responsiveness to have to write a separate service that does math to resize a component. I hope for a better native implementation of what the OA is asking for.

[Simeon]

Hello Mark,

The width property of the Dialog can now be set to a percentage:

https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/DialogComponent/

Here is an example that demonstrates this approach:

https://stackblitz.com/edit/angular-91xuu2

I hope the provided information is helpful.

Regards,
Simeon
Progress Telerik