search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
83 stars 23 forks source link

fix(Modal): Apply z-index on dialog wrapper #892

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

In itwinui-react 1.48.0, the Modal component uses iui-dialog-wrapper, which creates a stacking context and prevents children's z-index from being applied correctly. (regression)

So I've added a z-index of 999 to the wrapper, which results in the correct behavior:

I was going to make this change in css and release another 0.X version but that would require more PRs and result in merge conflicts so I've just added a small style tag to the portal container (can be removed later). I used the :where selector to keep the specificity to a minimum, because some of our users want to override the z-index.

mayank99 commented 1 year ago

Should be good for now. Are you considering adding "proper" css in v1.0?

Yeah, we can do that. This PR is just to get the fix out for people who are still on css 0.X and react 1.x.