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

Z-index of Notification - Place on top of all other elements

1 Answer 1534 Views
Notification
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 02 Mar 2020, 03:16 PM

    My notifications are appearing underneath my grids.   How do I get them to show up on top?   Image demonstrating the problem is attached.

 

 

1 Answer, 1 is accepted

Sort by
0
Preslava
Telerik team
answered on 04 Mar 2020, 11:26 AM

Hello John,

The Notification provides the option to set its position, by using its own attributes. If one wants to alter the vertical or horizontal positioning of the notification, one can use the position attribute. Another option provided by the component is to append it to a container by using the appendTo attribute.

For more information on how to use the above mentioned solutions, please, check the following page from our documentation:

https://www.telerik.com/kendo-angular-ui/components/notification/positioning/#toc-positioning

I have also prepared an example, which demonstrates how the Notification can be used with the Grid

https://stackblitz.com/edit/angular-sgcv1t?file=app%2Fapp.component.ts

The bellow shown snippet from the provided example, illustrates how the appendTohorizontal and vertical attributes work:

public showNotification(): void {
        this.notificationService.show({
            appendTo: this.appendTo,
            content: 'Error Message',
            animation: { type: 'fade', duration: 800 },
            type: { style: 'error', icon: true },
            position: { horizontal: "center", vertical: "bottom" }
        });
    }

Please, contact us, should there be further questions.

Regards,
Preslava
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.
Valera
Top achievements
Rank 1
commented on 01 Feb 2022, 12:23 PM

Hi. What if I use NotificationService in the ErrorService implemented by ErrorHandler (i.e Angular global error interceptor)? In this case I don't know the parameter "appendTo".
Georgi
Telerik team
commented on 02 Feb 2022, 08:40 AM

Hi Valera,

Something you could try is to use the cssClass setting to add a specific class to the notification element and then target that class with a style with higher z-index than the competing element.

Another option would be to somehow get a reference to the appendTo element and find a way to pass it to the ErrorService, but that would be specific to each project.

If you could send us a runnable example to debug, we could provide you with some more specific guidance.

Looking forward to hearing from you.

Regards,Georgi KarapeevProgress 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/.

Tags
Notification
Asked by
n/a
Top achievements
Rank 1
Answers by
Preslava
Telerik team
Share this question
or