| • Prtksxna | |
| Jul 9 2015, 9:36 AM |
| F190527: Screen Shot 2015-07-09 at 3.44.15 PM.png | |
| Jul 9 2015, 10:15 AM |
| F190524: Screen Shot 2015-07-09 at 3.02.30 PM.png | |
| Jul 9 2015, 9:36 AM |
The z-index of #p-personal is set to 100 and thus it renders over the dialog. I understand that OOjs shouldn't be making mediawiki specific changes like this, but right now OO.uiDialog has a z-index of just 2. Is this something we might change?
VE handles it by creating an extra .ve-ui-overlay-global with a z-index of 101.
See also - https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#z-index
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Declined | matmarex | T106333 Increase 'z-index' values across the board a bit | |||
| Resolved | matmarex | T105300 #p-personal hides OO.ui.Dialog in Vector skin |
This is even worse on mobile where because of the personal bar you can't even exit from the dialog.
I don't think it's even needed anymore to have that personal toolbar have z-index. Wasn't it for IE5 or something? Or was it for IE6 ? in that case we can just make it an IE specific CSS hack. Seems like it would be a safer long term solution.
Avoid 101 as that's still within the same range and will likely be overlapped by other elements in the same category in the future. Use something like 200 or 1000 instead.
At the moment 1-10 is used for within relative scopes of components, 100 to jump out within the same scope (e.g. on top of the page, but still "on" the page). It would make sense to reserve 1000+ for transient modals and overlays.
Although in the mid- to long term we should see to cut down on the z-indexes and go back to natural enforcement through relative scopes and DOM ordering. This is getting a bit out of hand. The only reason p-personal has that high z-index is to avoid user-generated content from overlapping interface controls (both for functional and security reasons).
Change 225871 had a related patch set uploaded (by Prtksxna):
Increase z-index of .oo-ui-dialog to 200
Change 225871 merged by jenkins-bot:
Dialog: Increase z-index of .oo-ui-dialog to 1000
The fix for a vector hack should be in vector or MW core, not in the OOUI theme, which contains sensible z-indexes. It should also be more targeted than just all dialogs, as the above patch was causing bugs with the local vs global overlay in VE mobile breaking the link inspector, so I have submitted a revert.
Change 228844 had a related patch set uploaded (by Esanders):
Revert "Dialog: Increase z-index of .oo-ui-dialog to 1000 "
Unless the z-index of dialogs is increased, we can't fix this in Vector or MW, as there are no z-indices inbetween that we could use for the personal menu. (Unless we refactor the skin more, or unless we override OOjs UI's styles, I guess.)
Change 228844 merged by jenkins-bot:
Revert "Dialog: Increase z-index of .oo-ui-dialog to 1000 "
Change 229146 had a related patch set uploaded (by Esanders):
Apply personal bar z-index hack to modal window managers in Vector
Change 229425 had a related patch set uploaded (by Jforrester):
Apply personal bar z-index hack to modal OOUI window managers
Change 229146 abandoned by Jforrester:
Apply personal bar z-index hack to modal window managers in Vector
Reason:
Consensus to do this in Vector, not core.
Change 229425 merged by jenkins-bot:
Apply personal bar z-index hack to modal OOUI window managers
Change 260084 had a related patch set uploaded (by Bartosz Dziewoński):
Actually apply personal bar z-index hack to modal OOUI window managers
Change 260084 merged by jenkins-bot:
Actually apply personal bar z-index hack to modal OOUI window managers