Modal dialog and notifications

[ice-blaze]

When a dialog is open and a notification is executed, the z-index seems to be behind the gray area of the dialog.

It's fine to have the notification behind the dialog when it was called before the dialog was open, but if you are in a dialog it feels wrong to be notified like this.

[gillerr]

I will discuss this issue with our Design Team.

Altering the z-index based on the presence of an overlay is not an easy solution and could lead to a situation where a notification is shown above the overlay and another one below. I don't know if this is a good thing.

A possibility would be to use a custom notification channel for the dialog. Then the notification would be displayed within the dialog itself.

[WeslleyDeSouza]

@gillerr

Or just allow the user to control zIndex over the api?

By default, the behavior remains unchanged. However, if provided, an inline z-index will be added to the host component.

this.notificationService.send({
                        zIndex: 10, // <-- zIndex control
            message: this.messageWithParams ? this.messageKey : this.message,
            messageParams: this.messageWithParams ? this.messageParams : undefined,
            title: this.titleWithParams ? this.titleKey : this.title,
            titleParams: this.titleWithParams ? this.titleParams : undefined,
            sticky: this.sticky,
            channel: this.channel,
            timeout: this.timeout,
            type: this.variant,
            groupSimilar: this.group
        });

Or with an style property binded to the host style?:Partial<CSSStyleDeclaration>

this.notificationService.send({
                        style: {
                          zIndex: 10, // <-- zIndex control
                        },
            message: this.messageWithParams ? this.messageKey : this.message,
            messageParams: this.messageWithParams ? this.messageParams : undefined,
            title: this.titleWithParams ? this.titleKey : this.title,
            titleParams: this.titleWithParams ? this.titleParams : undefined,
            sticky: this.sticky,
            channel: this.channel,
            timeout: this.timeout,
            type: this.variant,
            groupSimilar: this.group
        });

[nina-egger]

It was decided that allowing the user to control zIndex over the api is not a good option. This problem will be addressed once we work our new z-index system.

This issue will stay open until then.