5

I have site with fixed header in angular material with z-index of 1100.

While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.

To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.

Problem

But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index, So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.

Screen shoots

Normal scenario https://www.screencast.com/t/XhB2szH3gZe

Problem scenario https://www.screencast.com/t/fYrMYFEOd

I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.

Thanks!

Awais
  • 4,752
  • 4
  • 17
  • 40

3 Answers3

5

I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.

Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.

public openFeedbackDialog(): void {
    this.dialog.open(FeedbackFormComponent, {
        width: '450px',
        maxHeight: '450px',
        minHeight: '200px',
        backdropClass: 'feedbackBackdrop',
        hasBackdrop: true
    })
    window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}

enter image description here

igsm
  • 1,280
  • 2
  • 17
  • 19
  • Ah good approach, ill try that in future and will let you know if need any help currently ill added above fix in my project and its working fine :) ... Anyhow Thanks for this effort. Cheers! – Awais Nov 12 '20 at 08:01
  • Works fine, thx. Alternatively you could query the document for class .cdk-overlay-container. then you don't need a custom backdrop class: window.document.querySelector('.cdk-overlay-container').style.zIndex = "1001" – mifloma Aug 17 '22 at 06:41
3

I figured it out my self

Just override the z-index of cdk-overlay-container

In your style.scss 

.cdk-overlay-container{
  z-index:999; //lower then fixed header z-index so it goes behind it
}

and in your component dialog.scss

.cdk-overlay-container{
   z-index:2000 !important; //higher then fixed header z-index so it comes above
}

Cheers!

Awais
  • 4,752
  • 4
  • 17
  • 40
  • using important is not good practice, see discussion here: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css#:~:text=important%20is%20a%20bad%20CSS,to%20the%20latest%20important%20value. – ModusPwnens Jul 07 '22 at 13:36
  • @ModusPwnens then why css is giving us that rule though ? – Awais Jul 07 '22 at 13:42
  • 1
    it seems as though it should only be used if absolutely necessary. I'm working on a better work around at the moment and will post an answer when I find one. – ModusPwnens Jul 07 '22 at 13:55
  • ok i am waiting but any how idk why you give that ans negative... – Awais Jul 09 '22 at 13:43
  • I minused your answer to your question because it didn't solve the issue and it's not good practice. I gave igsm a plus one because his answer solves the issue and his answer should be the accepted one. – ModusPwnens Jul 11 '22 at 16:03
-1

You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.

Vugar Abdullayev
  • 1,852
  • 3
  • 21
  • 46