Sample App: Fix sidebar z-index to avoid tooltips overlapping#7982
Merged
sdvg merged 1 commit intopublic-ui:developfrom Jul 1, 2025
Merged
Conversation
sdvg
changed the title
sdvg
approved these changes
Jul 1, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs: #7942
Tooltip wird hinter Komponenten dargestellt – Stacking Context Problem gelöst
Problem:
Ein Tooltip, der vom Navigationspfeil in der Sidebar ausgelöst wird, wurde in mehreren Fällen hinter Komponenten wie kol-card, kol-table-header oder table-columns dargestellt bzw. teilweise transparent gerendert.
Ursache:
Das Problem lag nicht in den Kolibri-Komponenten selbst, sondern in der Sample-Anwendung. Dort fehlte ein z-index auf dem .app-sidebar-Container. Dadurch konnte der Tooltip, der im aside-Bereich erzeugt wurde, nicht korrekt über Elemente im main-Bereich gelegt werden – trotz hoher z-index-Werte am Tooltip selbst.
Lösung:
Setzen eines z-index: 1 auf .app-sidebar, um einen eigenen Stacking Context zu erzeugen. Der Tooltip wird damit über allen Komponenten korrekt angezeigt – unabhängig von deren internem position-Verhalten oder z-index.
Hinweis:
Diese Änderung betrifft ausschließlich das Layout der Sample-Anwendung und ist notwendig für die konsistente Darstellung von Tooltips, die über Container-Grenzen hinweg angezeigt werden.