EuiOverlayMask is over the EuiCollapsibleNav it comes from

[Thomas_Vaudry-Read]

Developing a Kibana plugin, and have a 3rd header layer in the page. When I set-up a button in the EuiHeader to open a EuiCollapsibleNav, the overlay covers the nav element and nothing is selectable. Here is a slice of the code, and gif of the issue.

<EuiHeader
            theme='default'
            sections={[
              {
                items: [
                    <EuiCollapsibleNav
                        isOpen={navIsOpen}
                        isDocked={navIsDocked}
                        button={
                            <EuiHeaderSectionItem border="right">
                                <EuiHeaderSectionItemButton
                                    aria-controls={keypadId}
                                    aria-expanded={navIsOpen}
                                    aria-label="App navigation"
                                    onClick={onMenuButtonClick}>
                                    <EuiIcon type="apps" size="m" />
                                </EuiHeaderSectionItemButton>
                            </EuiHeaderSectionItem>
                        }
                        onClose={() => setNavIsOpen(false)}>
                        <div style={{ padding: 16 }}>
                            <EuiTitle>
                                <h2>I am some nav</h2>
                            </EuiTitle>
                            <EuiSpacer />
                            <EuiButton
                                onClick={() => {
                                    setNavIsDocked(!navIsDocked);
                                }}>
                                Docked: {navIsDocked ? 'on' : 'off'}
                            </EuiButton>
                        </div>
                    </EuiCollapsibleNav>,
...

Thanks for the help.

[poff (Poff Poffenberger)]

Hey there!

One thing you might try is setting the maskProps on the EuiCollapsibleNav to be { headerZindexLocation: 'below' }. According to the documentation for the EUIOverlayMask, this seems like it'd set the z-index to be below the z-index of the EUIHeader.

If that doesn't work, let me know!

[Thomas_Vaudry-Read]

Sadly I had tried this already. It did not work.

My current solution is to unset the z-index for the application div in the css styles. I know this isn't ideal, but so far it is doing the job.

.application {
    z-index: unset !important;
}

[cchaos (Caroline Horn)]

Hey, responding from EUI here. The problem you're running into is that your custom header isn't fixed position. The Collapsible Nav's flyout and mask only respond well when the header is fixed which includes a higher z-index.

Your safest approach here is to manually add a z-index: 1000 to your header and then you'll also need to adjust the top position of the EuiCollapsibleNav with top: 97px. Here's an isolated codesandbox for you that emulates this suggestion.

jovial-chatterjee-3stie - CodeSandbox

It's safer because it won't affect anything outside of your direct plugin.

[Thomas_Vaudry-Read]

Hi @cchaos,

The problem is I do not want to override the navigation.ui.TopNavMenu so my EuiHeader is within the div.application; even by setting the fixed header, the overlay is still over it, so my guess is that I need to add this header to the navigation.ui.TopNavMenu element. I was unsuccessful in doing that.

Any help would be great.

Thomas

[cchaos (Caroline Horn)]

Sorry, I didn't mean to imply your header needed to be fixed. Have you tried the zindex solution shown in the codesandbox?

[Thomas_Vaudry-Read]

Yes I did, but because the parent div, (div.application), has a lower z-index, it doesn't change the result. I can try pulling the header out of the body, but I'm not sure there was a spot for it. I will try this and reply here.