The Datepicker Popup Flows "Off Screen"

[dkt2]

Describe the bug

For my application, the the popup/popover flows in such a way that it gets occluded by another element. The banner that is hiding the top portion of the datepicker is position: fixed.

Is there a way to either adjust the z-index of the popup or specify a default direction to the popup flow?

To Reproduce

Steps to reproduce the behavior:

1. Have element with position: fixed
2. Position Datepicker in such a way that the popup flows into the position: fixed element and is occluded by it

Expected behavior

For the popover to not be occluded.

Screenshots

Please reference the screenshots above.

Desktop (please complete the following information):

• OS: MacOS Apple M1 Pro
• Browser Chrome
• Version Version 119.0.6045.123 (Official Build) (arm64)

[blackfalcon]

Hi @dkt2 -

The layering of the auro-popover component drives the layering of the calendar. That calendar UI is injected into the <slot> as content for that element.

--auro-depth-tooltip: 300

:host([data-show]) {
  .popover {
    z-index: var(--auro-depth-tooltip);
    background-color: var(--auro-color-background-lightest);
  }
}

Ideally, I would think that if your header is below that 300 z-index, you should see the results you are looking for.

[dkt2]

@blackfalcon thank you! Adjusting my header to below z-index: 300 fixed the issue