Skip to content

Commit

Permalink
fix(shell): create new stacking context for roots
Browse files Browse the repository at this point in the history
This adds two rules for the application root and portal root divs that
creates a new stacking context for each, this allows an app the freedom
to do pretty much whatever it wants with z-indexes, without affecting UI
components that render in a Portal.

It also allows other 3rd party libraries that rely on appending elements
to the DOM and modifying z-indexes to work better with our platform.

The isolation property has good support and should align nicely with our
supported browsers[1].

[1] https://caniuse.com/mdn-css_properties_isolation
  • Loading branch information
varl committed Sep 1, 2021
1 parent 837875f commit 324a095
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions shell/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,13 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

#dhis2-app-root {
/* establish a stacking context for the application */
isolation: isolate;
}

#dhis2-portal-root {
/* establish a stacking context for portals */
isolation: isolate;
}

0 comments on commit 324a095

Please sign in to comment.