Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create sticky action buttons for table in Settings/User App #38215

Open
JuliaKirschenheuter opened this issue May 12, 2023 · 1 comment
Open
Labels
1. to develop Accepted and waiting to be taken care of design Design, UI, UX, etc. enhancement feature: users and groups

Comments

@JuliaKirschenheuter
Copy link
Contributor

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:

Peek 2023-05-10 14-54

There were 2 main problems:

  1. During opening action menu of each row
  2. 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 had z-index: 10
  • .popovermenu had z-index: 110
  • .userActions is a parent of .popovermenu
  • A child cannot have z-index higher than parent

For position: relative we could just remove z-index: 10. But with position: sticky it works different... position: sticky always creates a new stacking context. It is possible neither to remove z-index from sticky parent, nor to make child with higher z-index...

If I'm not wrong, the only way to keep sticky here is to use another container for NcActions 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 of NcActions 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.

@JuliaKirschenheuter JuliaKirschenheuter added enhancement 1. to develop Accepted and waiting to be taken care of labels May 12, 2023
@Chartman123
Copy link

Chartman123 commented Jun 20, 2023

@JuliaKirschenheuter I'm not sure if it's related, but in current NC27 I can't even see the action buttons if I enable further columns like "last login" or "user backend". They are then out of the viewable area and there's no horizontal scroll bar.

I can only see them when I click inside the text and mark it by moving to the right until they are viewable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of design Design, UI, UX, etc. enhancement feature: users and groups
Projects
None yet
Development

No branches or pull requests

3 participants