Dropdown / Tooltip stacking issue

[JulianEvi]

Prerequisites

• [X] I have not leaked any internal company information.
• [X] I have not posted internal links or code snippets.

What happened?

Hi, I observed that dropdowns and tooltips can overlap with other content.

This happens due to the surrounding containers having a different stacking context. Bootstrap offers the "container" property on their popover implementation (https://getbootstrap.com/docs/5.3/components/popovers/), which can be set to "body" and will add the popover at the end of the body tag. Having the dropdowns and tooltips directly in the body prevents those stacking context issues.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

2.0.4

Code to produce this issue.

-

[matthiashader]

Could you please provide more information, e.g specify which component are actually overlapping with ix-dropdown / ix-tooltip and eventually a code snippet to reproduce?

[JulianEvi]

<div class="position-relative" style="z-index: 1">
  <ix-button #trigger>Open</ix-button>
  <ix-dropdown [ixDropdownTrigger]="trigger">
    <ix-dropdown-header label="Category"></ix-dropdown-header>
    <ix-dropdown-item label="Item 2"></ix-dropdown-item>
    <ix-dropdown-item label="Item 3"></ix-dropdown-item>
    <ix-dropdown-item label="Item 4"></ix-dropdown-item>
    <ix-divider></ix-divider>
    <ix-dropdown-item label="Item 5"></ix-dropdown-item>
  </ix-dropdown>
</div>
<div class="position-relative w-100 bg-danger" style="height: 50px; z-index: 2"></div>

Basically every component will overlap with the dropdown as long as it is in a different stacking context with a higher z-index. The dropdown itself has a z-index of 1000, but this z-index is only relevant in the stacking context of the surrounding container.

[nuke-ellington]

Hello @JulianEvi, thank you for bringing that up. As a workaround you could place the dropdown inside the body tag yourself since it does not have to be a sibling to the trigger element. I understand that this might not work in all scenarios, though.

[matthiashader]

Internal ref [IX-904]