How to handle z-index of Dialog, Popover, Notification

Flow
1

Here, the user is trying to save while the value in acustom dropdown field is incomplete:
image

The field shows its dropdown panel ( an anchored Popover ) and my validation routine displays an error ( a Notification )

Due to the z-indexes, the Notification is behind the Popover.
In this case the Popover is 1001 and the Notification is 201.
Is there anything I can do to influence this?

2

You could try overriding the z-index of the notification overlay via css.

Might need an !important set to it, too.

3

Vaadin sets z-index in the tag styling, so I can’t override.

<vaadin-popover-overlay style="z-index: 202; ..." >
<vaadin-notification-container style="z-index: 201;">

Actually, I’m having trouble seeing a consistent pattern.
The snippet above was from yesterday. When I try to reproduce today, the popover gets z-index 1001 and the notification-container has none.
But, as long as vaadin might set the z-index in the tag style, I can’t reliably override in the css

4

That’s why I mentioned the !important :slight_smile: . That should work anyways and override the inline style (at least as a workaround for now).

Nevertheless, if you can reproduce that in a simple sample, an issue in the github repo would be helpful

5

(but even without a sample having this issue being aware to the web components team would be helpful)

6

Heh. I’ve always assumed the tag style overruled any css rules, including !important

Testing directly in the style editor in the browser:

vaadin-notification-container {
    z-index: 3000 !important;
}

This worked, but only if Vaadin had set a z-index on the vaadin-notification-container tag!
If there was nothing on the tag, my notification still ended up behind the popover…
So, I assume Vaadin does stuff with the z-index in javascript?

7

I cannot check it myself at the moment; could you try it with vaadin-notification-card or vaadin-notification-card::part(overlay) instead?

8

Since this change in V24.5 refactor: include notification container into the overlay stack (#8198) (CP: 24.5) by web-padawan · Pull Request #8201 · vaadin/web-components · GitHub the notification participates in the overlay stack, which means that opening a notification while another overlay is opened will get z-index from it and add +1 to ensure notification appears on top.

The overlay has z-index: 200 by default and notification container has z-index: 1000 which should be actually removed as it’s a leftover from the old logic where notification had a fixed value (this also applied e.g. to Tooltip - it used to have z-index: 1100 in the past).

As a workaround you can try to execute bringToFront() on the vaadin-notification-container element (this logic runs every time a new notification is being shown).

9

I’ve reverted the code from my actual application so I can’t test that.
However, I’ve created a simple test-view:

package com.ec.traveller;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.notification.Notification.Position;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("testZindex")
public class TestZIndex extends VerticalLayout {

    public TestZIndex() {
        add(
            new Button("Open Dialog + Notification", event -> {
                openDialog();
                openNotification();
            })
            ,
            new Button("Open Notification + Dialog", event -> {
                openNotification();
                openDialog();
            })
            );
    }

    private void openDialog() {
        
        var dialog = new Dialog("Dialog");
        dialog.setModal(false);
        dialog.setDraggable(true);
        dialog.getFooter().add(new Button("OK", event -> dialog.close()));
        dialog.open();

    }
    
    private void openNotification() {
        var notification = new Notification("Notification");
        notification.addThemeVariants(NotificationVariant.LUMO_ERROR);
        notification.setPosition(Position.MIDDLE);
        notification.setDuration(0);
        notification.add(new Button("OK", event -> notification.close()));
        notification.open();
    }

}

The fun thing is that this works as I’d like right out of the box;

  • The z-order is based on the order in which the Notification / Dialogs are opened
  • If I drag a Dialog, it is moved to the top

The only thing that was unexpected is that if I have multiple notifications they all have the same z-index, since they share the same vaadin-notification-container, while the Dialogs each have their own.

So, I don’t know why it behaved the way it did in my main application, but it looks like I should be able to control it with the order in which I open them

10

Yes, this is exactly how it is supposed to work. Interacting with a modeless dialog does bring it to front automatically. Also notifications indeed share a single container so showing a new notification makes old notifications also appear on top of other overlays.