Toast autoZIndex not working correctly

[ribizli]

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

https://stackblitz.com/edit/primeng-toast-autozindex

Current behavior
The toast's zIndex is set only once after view init. Every time a modal dialog is opened, the DomHandler.zindex is increased and the dialog mask gets a higher zIndex as our toast was set initially. So every toast messages are overlaid, which is not the desired behavior.

Expected behavior
Increment toast zIndex to not be overlaid by dialog mask.

Minimal reproduction of the problem with instructions
See above.
A possible solution could be to implement the ngDoCheck lifecycle method to increase the zIndex if needed. (I'm not fully sure about the negative performance impacts of this)

• Angular version: 6.1

• PrimeNG version: 6.1.5

The source code hasn't change in this regard since then.

• Browser: [Chrome ]

zIndex must be supported in all browsers in the same way.

• Language: [TypeScript 2.9]

[yigitfindikli]

You need to give baseZIndex.
<p-toast [baseZIndex]="100"></p-toast>
And please use forum for questions and help requests.

[ribizli]

This wasn't a help request! This is definitely an issue. I'm reading the source code before reporting such issues, and believe me, I know what I'm doing.

p-dialog increases its zIndex on every mousedown (moveOnTop()), so it can happen soon that the DomHandler.zindex gets over the +100. After opening the next modal dialog, the toast will be already behind. Sure I could specify 1000 or 10000 for baseZIndex, but this it is just question of time when dialog's zIndex it gets over it.

But anyway the name autoZIndex of the input of p-toast suggests it will be maintained so, that it is always on top. But this is not the case, and so misleading. Currently this attribute has no real effect, only that initially a zIndex is set for the component. (Since toast is mostly a global component near to the root of the application tree, it is initiated early and once with the application start)

I solved this issue currently in my app using a wrapper component and a workaround:

  @ViewChild(Toast)
  toast: Toast;

  ngDoCheck() {
      if (!(this.toast && this.toast.containerViewChild)) return;
      const requiredZIndex = `${DomHandler.zindex}`;
      const el = this.toast.containerViewChild.nativeElement as HTMLElement;
      if (el.style.zIndex !== requiredZIndex) el.style.zIndex = requiredZIndex;
  }

The code above ensures that the Toast container is always above the dialog's mask.

But I think this logic should be in the Toast itself.

So please re-open this issue.

[mbuchner]

+1

[PhamVanthinh2801]

i have issue that, but now, i want fixed them...

[JohnStaikos]

Same problem still persists

[carlos-gomez-espinosa]

still persists on v14.2.3

[jmattgiroux]

I too have this issue.

[OrestisKariotis]

In my case, what @ribizli said was exactly the issue, but I had to set the zIndex to a value higher than the required zIndex for the toast to appear above my dialog. Namely:

el.style.zIndex = requiredZIndex + 1;

I'm not that experienced in CSS properties manipulating, so I am unaware of whether providing values higher than the required zIndex might have side-effects.

[Arthur-Carbonari]

So this is not fixed, toasts are being displayed behind the dialogs overlay even if we declare the toast's z-base-index. Why this hasn't been fixed even tho its been identified years ago is beyond me.
To clarify this happen if the toast is declared outside the dialog and its getting fetched by key. If you declare the toast inside the dialog it will work. BUT the expected behavior should be that toast should be displayed above the dialog, even if declared outside of it.