Notification is overflowing beneath other items

1 Answer 161 Views
Notification
Alex
Top achievements
Rank 1
Iron
Iron
Alex asked on 21 Feb 2022, 04:18 AM | edited on 21 Feb 2022, 04:20 AM

Code

<TelerikNotification @ref="NotificationComponent"
HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />

The attached photo shows how the notification gets rendered.

Please let me know how can I fix it, so that it either:

  • Comes on top of all the other items. That's fine with me, since the user can just close it.
  • Or, be limited to a certain size and let the user scroll.

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 21 Feb 2022, 09:27 PM

Hello Alex,

You likely need to set a suitable z-index to it: https://docs.telerik.com/blazor-ui/components/notification/appearance#z-index

You may also find useful this article on choosing a position that is not part of the built-in options: https://docs.telerik.com/blazor-ui/knowledge-base/notification-custom-position

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

Alex
Top achievements
Rank 1
Iron
Iron
commented on 23 Feb 2022, 04:55 PM

Hello, Marin,

 

Setting z-index to high value only works if position is set to relative, but if we do it using Class attribute, it gets overridden by the position attribute in the k-notification-group. I fixed it in the end by adding position: relative !important to the class.

 

Tags
Notification
Asked by
Alex
Top achievements
Rank 1
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or