Skip to content

Conversation

NakataCode
Copy link
Contributor

The isolation property creates a new stacking context for the entire DynamicPage component, which allows us to use minimal z-index values (3 for header, 2 for footer) while maintaining proper internal layering. This prevents the component's high z-index values from conflicting with external elements like side navigation, without affecting the component's internal behavior. The isolation approach is preferred over adjusting z-index values as it doesn't create side effects with other components.

  • Add isolation: isolate to :host to create new stacking context
  • Reduce z-index values from 98/110 to 3/2 for internal layering

Fixes: #12360

@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Sep 30, 2025

🧹 Preview deployment cleaned up: https://pr-12404--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview September 30, 2025 12:58 Inactive
@NakataCode NakataCode marked this pull request as ready for review September 30, 2025 13:05
@NakataCode NakataCode merged commit b1303fa into main Oct 10, 2025
14 checks passed
@NakataCode NakataCode deleted the dynamic-page-isolation branch October 10, 2025 07:03
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview October 10, 2025 07:03 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ui5-navigation-layout/ui5-side-navigation/ui5-dynamic-page]: SideNavigationItem is displayed partially

3 participants