Create sticky action buttons for table in Settings/User App #38215
Description
Html structure of the table has been changed for a11y purposes: #36921.
During testing of new implementation some bugs regarding position: sticky
and not right existing implementation of z-index
of the action buttons have popped up. Demo:
There were 2 main problems:
- During opening action menu of each row
- During opening action menu of each row in editing mode
For the time reasons was decided to keep good / not broken state but without position: sticky
which causes possible right scrolling inside of a table (from a11y perspective absolutely valid but not as user friendly as before), see #37870.
This is a follow-up ticket to correct action buttons to sticky position with current table implementation. There were some suggestions regarding implementation:
Current style was a bit incorrect:
.userActions
hadz-index: 10
.popovermenu
hadz-index: 110
.userActions
is a parent of.popovermenu
- A child cannot have
z-index
higher than parent
For
position: relative
we could just removez-index: 10
. But withposition: sticky
it works different...position: sticky
always creates a new stacking context. It is possible neither to removez-index
fromsticky
parent, nor to make child with higherz-index
...
If I'm not wrong, the only way to keep sticky here is to use another
container
forNcActions
here. For example,#app-content
. But > I am really not sure, it positions element correct with sticky...
For an experiment, try to set
container
prop ofNcActions
here to#app-content
.
from #37860 (comment)
And:
Proposals regarding sticky + z-index issue:
Render
NcActions
outside the table row
- Props:
- I'd expect it to be easy to implement
- Cons:
- Requires rewriting of some integration tests because row buttons will be outside of the row
Generate progressive z-index - set each next row less
z-index
value
- Props:
- Keep the current structure
- Cons:
- More complex implementation
- Not sure about performance and large tables
from #37870 (comment)
Please pay attention that integration tests possibly have to be adopted too.
Activity