Set button layout from "stretched" to "normal"

[Holger]

Hello,

currently the dialog component and service only allows the action buttons to be stretched, that's not what we want, because it doesn't match our application's style. We would like to have the buttons in "normal" layout, like it is possible with the Kendo UI jQuery counterpart. I already logged a feature request in the Feedback Portal, but until it may be implemented sometime we need a workaround.

Is there any other solution than overriding all relevant CSS styles?

Regards,
Holger

[Dimiter Topalov]

Hi Holger,

Thank you for the feature request. We will track it and prioritize accordingly based on the customer demand, and estimated business value of the proposal.

Meanwhile, you can use any custom buttons with desired custom styling via the kendo-dialog-action component that gives the developer full control over the action buttons layout and click handlers:

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/action-buttons/

Here is an example that demonstrates adding regular (not Kendo UI) button elements and customizing their styling:

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

Alternatively, you can overwrite the action buttons container styling:

https://stackblitz.com/edit/angular-tsphnl-z6gakx?file=app/app.component.ts

https://stackblitz.com/edit/angular-tsphnl-1nujel?file=app/app.component.ts

https://stackblitz.com/edit/angular-tsphnl-fzmdvw?file=app/app.component.ts ...etc.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Patrick]

Hi,

 

After upgrading from Angular 6 to Angular 7 and upgrade Progress component to the latest we now get modal buttons stretched and we don't want that.

The proposed solution by introducing a custom class is not suitable for large application.

How to totally get rid of that behavior for class k-dialog-button-layout-stretched?

I am worried that when upgrading components version I am getting unwanted layout changes. A best practice is never changing UI behavior unless introducing a new property that need to be set.

[Dimiter Madjarov]

Hello guys,


Thank you for the provided feedback.
Exposing the button layout as a Dialog option will be available in the upcoming week or two.

Regards,
Dimiter Madjarov
Progress Telerik

[kaustubh]

Hi @Dimiter,

Was it ever implemented, I am still facing this issue, we are using kendo-angular-buttons 6.0.0?

Please advise.

[Dimiter Topalov]

Hello Kaustubh,

The Dialog component actionsLayout option was introduced in 2019, v. 4.0.0 of the Dialog package:

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

https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/changelog/#19b89709-0697-51eb-84ea-8a8843ef1eb4

Please note that it is only applicable when the buttons are configured trough the "actions" option:

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

https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/dialog/action-buttons/#toc-using-the-actions-collection

Here is an example demonstrating this configuration:

https://stackblitz.com/edit/angular-j6gu1y-rnwfaa?file=app%2Fapp.component.ts

The latest Kendo Buttons major version is 7, and all new styling and design changes are reflected in the latest versions of our packages and version 5 of the Kendo themes. The discussed actionsLayout option however works in the same way with the previous versions of the themes and buttons - 4.x and 6.x respectively. The following example shows the same Dialog with Buttons v.6, and theme v.4.42:

https://stackblitz.com/edit/angular-j6gu1y-le3ndq?file=app%2Fapp.component.ts

I hope this helps.