This is a migrated thread and some comments may be shown as answers.

Set button layout from "stretched" to "normal"

3 Answers 842 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Holger
Top achievements
Rank 1
Holger asked on 05 Feb 2019, 09:30 AM

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

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 06 Feb 2019, 03:25 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Patrick
Top achievements
Rank 1
answered on 17 Jun 2019, 07:55 PM

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.

0
Dimiter Madjarov
Telerik team
answered on 18 Jun 2019, 04:55 AM
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
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
kaustubh
Top achievements
Rank 1
commented on 21 Jan 2022, 05:50 PM

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
Telerik team
commented on 25 Jan 2022, 09:32 AM

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.

Tags
Dialog
Asked by
Holger
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Patrick
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or