Igniteui-angular: Toast does not show correctly in tabs

[wnvko]

Description

I have a component which shows igxToast messages. When I put this component in igxTab's tabs the toast message does not shows correctly in the first tab, and does not show at all in all other tabs.

• igniteui-angular version: 9.0.1
• browser: all

Steps to reproduce

1. Start this Stackblitz.
2. Click on Show notification button.
3. Click on second tab.
4. Click on Show notification button.

Result

On first tab notification is cut.
On all other tabs notification does not appear at all.

Expected result

Notification should be visible in all tabs

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[simeonoff]

@desig9stein Can you take a look at this?

[desig9stein]

The problem is that the class that gives the styles for the toast is on div inside the toast. In our dev demos and angular samples, there is no div and the styles are applied on the host(toast) itself. @wnvko do you know where that div comes from?
screenshot

[wnvko]

The toast in dev demos has not message input set. It is something like this:

<igx-toast>Some messge</igx-toast>

The sample in the issue has message set like this:

<igx-toast [message]="Some message"></igx-toast>

Up to version 9.1.0-alpha4 IgxToast's template was this:

<div [ngClass]="mapPositionToClassName()" *ngIf="this.isVisible" [@animate]="'show'">
    {{ message }}
</div>

And this is where the div came from.
Finally in version 9.1.0 IgxToast's template became this one:

<ng-content></ng-content>
<span>{{ message }}</span>

And now the message is put in span if set as input, and is not wrapped if put as content.
However with or without the div the issue is reproducible - here a new StackBlitz without div in 9.1.0.

[simeonoff]

This issue is caused by the transform style rule applied on the div with class igx-tabs__content. The transform rule creates both a new stacking context and a containing block for fixed-position elements, which the _igx-toast_ is.

The only reasonable way to fix this is to render toast instances in the global outlet. This means we will have to remove the CSS responsible for positioning the toast and use 3 different positioning settings - for the bottom, middle, and top positions.

[desig9stein]

Another solution is to set the position to absolute and tell the users that they have to specify the relative parent. In the sample, the relative parent will be the toast-holder. However, the problem with the cutting is that the igx-tabs__content-fixed has overflow hidden and the height of that container is determined by its child's content. Even with the absolute position if the user doesn't specify the height of its content the toast we'll be cut off.

sample

[wnvko]

I think we should make IgxToast to either use IgxToggleDirective or IgxOverlayService. This way we may solve this issue as others we did not face yet, e.g. showing the toast from dialog window.