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

box-shadow on k-animation-container class

4 Answers 79 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
Jeffrey asked on 07 Mar 2021, 09:19 PM

I know there was already a discussion about how the k-animation-container was hiding the box-shadow and by adjusting the padding/margins, the shadow could be revealed.

I'm attempting to approach this from a different perspective.  I've applied a box-shadow to the k-animation-container itself and it looks fine except for the fact that the shadow appears immediately... before the animation of the dropdown starts.  This results in the drop-down list appearing to slide into the shadow.  I see the same behavior with the DatePicker and ComboBox.

I see that there is a k-animation-container-shown class as well but it doesn't appear to be implemented.  At least not with the DropDownList.  As a matter of fact, I've discovered that k-animation-container-shown is used with the ContextMenu but even then not as I would expect.  With the ContextMenu, the k-animation-container-shown class is applied to the div element even when the menu isn't visible...but, it gets the job done as the menu appears with the shadow instantly.  The ContextMenu isn't animated into position.  (Not sure if that's something you are planning on doing in the future.)

I was hoping the k-animation-container-shown class would be consistently applied to the div once the DropDownList/ContextMenu/DateTimePicker was fully visible (i.e. at the end of the animation).  

Any suggestions on how to best apply the shadow to all of the controls?  Another solution would be to just get rid of the animation.  Doesn't look like I can do that with a parameter on the control.  How would I best override the animation?

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 08 Mar 2021, 11:58 AM

Hi Jeffrey,

If you are referring to the Material Theme lacking a shadow on the dropdowns, you can Follow its fix here: https://feedback.telerik.com/blazor/1428679-popups-like-filter-menu-dropdownlist-do-not-have-a-border-shadow-in-material-theme.

You can also remove animations with CSS for the time being, and you can Follow a more "programmatic" way here: https://feedback.telerik.com/blazor/1469662-way-to-modify-default-values-of-animations-such-as-duration-and-delay-for-a-component-such-as-combobox.

Regards,
Marin Bratanov
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/.

0
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 08 Mar 2021, 02:00 PM

Thanks Marin... I didn't realize it was limited to the Material theme.  I was aware of the fix and have already applied the box-shadow on the k-animation-container class.  The one drawback to that solution is that the shadow appears before the animation is complete.  The animation is a nice-to-have but not critical so I went ahead and overrode the transition setting on the k-popup class as you suggested.

Unfortunately, there is still one minor visual glitch with that approach.  There seems to be a delay after the popup closes, such that the shadow remains visible for a second after the popup disappears.  I haven't been able to figure out what's causing that.

0
Marin Bratanov
Telerik team
answered on 08 Mar 2021, 02:05 PM

Hi Jeffrey,

These things are much harder to hack like that in Blazor since there isn't direct control over the DOM (when comparing to things like Kendo UI for jQuery). Until the actual features get implemented, I'm afraid I can't offer better options.

Regards,
Marin Bratanov
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/.

0
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 08 Mar 2021, 02:07 PM
No worries!  Thanks for the quick reply.
Tags
General Discussions
Asked by
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Jeffrey
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or