Igniteui-angular: igxDialog goes behind the igxForOf scrollbar

[mkamiishi]

Description

igxDialog goes behind the igxForOf scrollbar.

• igniteui-angular version: 7.1.3
• browser: Chrome

Steps to reproduce

1. Run the attached sample.
2. Click the ‘Show Dialog’button.
3. Resize the browser window so the dialog overlaps with the scrollbar.

Result

igxDialog goes behind the igxForOf scrollbar.

Expected result

igxDialog should appear in front of the igxForOf scrollbar.

Attachments

igxfor-igxdialog.zip

[Aleksandyr]

@mkamiishi This is not a bug. Probably It is a bug into the documentation because it wasn't documented but the tricky part here is that the vertical virtual for of directive and the overlay has their own positioning and z-index, which means that they are forming two different stacking contexts which are hooked for the document and the fact that the vertical helper possess a z-index which value is bigger then the overlay it overlaps it.

If you want to find more about that problem you can read this article which is more technical and it is described really well how those stacking contexts and stacking orders work.

I have modified the StackBlitz sample and everything seems to work fine now.
I've added a z-index: 0 on the parent (table) which holds the virtual vertical container. It works because you are saying that everything which is under the table which is the root element has it's own staking context and every z-index within that context affects only the elements that are inside. So the overlay has z-index: 10 which place it in-front of the table(root)

[mkamiishi]

Adding z-index:0 to the parent element worked.

[zdrawku]

Let us know if you have any other questions or concerns