Set button layout from "stretched" to "normal"

4 posts, 0 answers
  1. Holger
    Holger avatar
    4 posts
    Member since:
    Oct 2018

    Posted 05 Feb 2019 Link to this post

    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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 06 Feb 2019 Link to this post

    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.
  3. Patrick
    Patrick avatar
    5 posts
    Member since:
    Mar 2015

    Posted 17 Jun 2019 Link to this post

    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.

  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2308 posts

    Posted 17 Jun 2019 Link to this post

    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.
Back to Top