Declined
Last Updated: 18 Mar 2021 16:01 by ADMIN
Stewart
Created on: 15 Mar 2021 09:30
Category: UI for Blazor
Type: Feature Request
0
Bring Notifications in front of window modal overlay

Currently, the notification is displayed behind the overlay of the window modal. I was wondering if it might be better to be in front.

1 comment
ADMIN
Lachezar Georgiev
Posted on: 18 Mar 2021 16:01

Hello Stewart,

This happens by design. Although both the Window and Notification are modal components. the Window has a higher priority, that is why it blocks out the screen. It must concentrate the user's attention to the information in the Window. Please note that such decisions are made by our UX team and that is why we have chosen this behavior as default.

Having said that, there are ways to achieve the effect where the notification is not grayed out when the Window opens. One way to do it would be to use CSS. You could attach a class to the Notification component and use it as a CSS selector to control the value of the z-index property. The value should be greater than the Window component's overlay, which is rendered as a div element with a class "k-overlay".  I'm pasting a sample code snippet as an example:

@*The style tag is place here for convenience. In a production app the style rules should be part of your application's css files.*@

<style type="text/css">
    .myNotificationClass {
        z-index: 20000;
    }
</style>

<TelerikButton OnClick="@AddNotification">Add Notification</TelerikButton>

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

<TelerikButton Icon="window" OnClick=@(()=> WindowVisible = true)>Open Modal</TelerikButton>

<TelerikWindow Width="500px" Height="300px" Centered="true" @bind-Visible=@WindowVisible Modal="true">
    <WindowTitle>
        <strong>Modal Window</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p>Click the close button to dismiss this modal dialog.</p>
    </WindowContent>
</TelerikWindow>


@code {
    public TelerikNotification NotificationComponent { get; set; }
    public NotificationVerticalPosition VerticalPosition { get; set; }
    public NotificationHorizontalPosition HorizontalPosition { get; set; }

    public bool WindowVisible { get; set; }

    public void AddNotification()
    {
        NotificationComponent.Show(new NotificationModel() { Text = "Test Notification", ThemeColor = "success" });
    }
}

I've chosen a value of 20000 for the notification's z-index because the Window has its own z-index set to 10001 (see attached screenshot).

Regards,
Lachezar Georgiev
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.