Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 23 Feb 2023 11:12 by ADMIN
Mauro
Created on: 07 Jul 2022 08:37
Category: Dialog
Type: Bug Report
1
Kendo drawer animations break all display:fixed components inside it

Because of the CSS, if a parent element has used translate (transform: translateX(0px); ) every child element  under it is no longer fixed.

This causes components like kendo-dialog to be relatively positioned inside the drawer - usually cut off.

Even turning off animation still leaves the style rule.

 

  • Disabling animation should also ensure no related CSS is applied (like using transform: none at least)
  • Provide a keyframe based animation instead of translateX (example http://jsfiddle.net/whnuLf6v/50/)
8 comments
ADMIN
T. Tsonev
Posted on: 03 Aug 2022 06:54

Hi Mauro,

I see,  definitely not ideal. I've logged an issue in our public tracker so you can track its progress and other users can see the workarounds.

Best Regards,
T. Tsonev
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.

Mauro
Posted on: 27 Jul 2022 14:36
Currently, I did disable animations + CSS override (UX wasn't too happy but it works at least).

Dialog service unfortunately is too restrictive with the design and customization of the contents (header, body, footer/actions).
ADMIN
T. Tsonev
Posted on: 27 Jul 2022 08:39

Hi Mauro,

That makes sense, in the end, the dialog should be able to overlay other page content. I can think of two short-term workarounds while we consider our options for the animation:

  • Use the Dialog service and set a dialog container outside of the Drawer.
  • Override the transform rule by using <kendo-drawer [style.transform]="'none'">, see demo.

Best Regards,
T. Tsonev
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.

Mauro
Posted on: 25 Jul 2022 06:56

It's inside the drawer because the dialog in my case is part of another component.

A custom form control that opens a dialog to manipulate data.

 

ADMIN
T. Tsonev
Posted on: 25 Jul 2022 06:35

Hi Mauro,

We haven't considered the use case for placing a Dialog in the Drawer, at least not until now. Do you see any drawbacks to placing it in the content instead? This should work, although it needs a z-index bump that we'll investigate.

Replacing the transform is also an option, but we're not quite convinced this is necessary at the moment. We may do so if it turns out to be problematic in the long-term.

Best Regards,
T. Tsonev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Mauro
Posted on: 18 Jul 2022 07:37

https://stackblitz.com/edit/angular-dpwlu2

 

Link to stackblitz editor.

Mauro
Posted on: 18 Jul 2022 07:34

https://angular-qlb5yr.stackblitz.io/?

 

This is out of Kendo drawer template demo + kendo-dialog inside it (the contents can easily be another component that used kendo-dialog - or confirmation on submit click etc).

This should demonstrate the issue without any custom CSS or components.

ADMIN
Yanmario
Posted on: 14 Jul 2022 06:41

Hi Mauro,

Thank you for the feedback.

In general, if custom CSS is applied to our components it is in the hands of the developer to handle any unwanted behaviors or remove default styles that might cause issues depending on the style itself.

Could you send us a runnable example project, so that we can check the implementation and get back to you with some feedback and status changes.

Thank you in advance for your cooperation. I am looking forward to your reply.

Regards,
Yanmario
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Create an account Log In
View
Type
Status
Category