Group list is overlapping if you are part of too many groups

[nickvergessen]

cc @GretaD

[GretaD]

@nextcloud/designers how to move on with this one? How about we show first 3 and the rest with a tooltip when you hover?

[Luticus]

From an outside perspective maybe add a small down arrow like feature to the right of lists that overflow. When you click the list or the arrow it will show an expanded list via a drop down similar to what happens when you click the [...] menu on the right. Probably should make all the items in that list be one per line though unlike how they are presented in the main view. Alternatively, instead of the down arrow you could print an ellipsis at the end of the list in the main view that indicates the list is truncated and then when you click the list you get a drop down showing the full list.

[cfranz]

I have to report another issue regarding the list of users. When editing a user and trying to choose the groups assigned to a user, the dropdown is behind the row of the users below.

I've added a screenshot to show the issue:

[GretaD]

while on editing mode, all the multiselect elements are overlapping

[maximiliancs]

While fixing this bug it could be useful to overthink the general user experience when managing the user's groups. If there are many groups in the list, it's really horrible to scroll through the small tooltip, especially when changing user groups on the go on mobile devices (e.g. iPad). A pop up window would with a list of all groups and a search option would be nice.

Besides that the user management could see improvements from a security standpoint of view. There should be more user roles to select from or specific settings admins can make. At the moment there are only admins, users with more rights within their user group and normal users. There should be more individual settings which for example deactivates changing of user's password or deactivating accounts when not being an admin. There are many more features that could be implemented here to make nextcloud even more better than it is now. However this is probably not the right post for it.

[JohanBoshoffWebAware]

If there is any custom css we can implement to fix this overlapping, please post it here. It is really confusing with the overlapping.

I suggest there should be a default background color implemented so that the overlapping parts is not visible. I have tried with the custom CSS but it does not work.

This is the CSS that needs changing and works in the browser element:

.multiselect[data-v-764bdcc] .multiselect__content-wrapper .multiselect__content {
background-color: white;
}

.multiselect__content-wrapper li {
background-color: white;
}

.multiselect__content-wrapper {
background-color: white;
}

However, in custom CSS this gets ignored.

[awesome-michael]

Kind of works if grid-auto-rows: 60px; is deleted from #body-settings #app-content.user-list-grid. Just fiddled a bit with the developer tools of my browser.

[RailsViceRoads]

Found the same behaviour in users view, if the column group administrator contains a huge number of groups. NC Version is 18.0.1
In this case, the content of the whole row will moved in the next users line.

[p5n]

I patched 18.0.1 with diff between stable18 and v18.0.1 and it does not look fixed.

[nickvergessen]

Did you also update the compiled JS files?

[DBJRdev]

After upgrading our test instance to 18.0.2RC2, I realized that the appearance problem is only visible for the first couple of users, because the dropdown for groups really appears downards. If you try to edit a user who's later in the list, the group dropdown appears above the user and you can edit the user's groups without problems – all looks nice there. See the comparison here:

[DBJRdev]

@ChristophWurst @juliushaertl Please reopen, as the issue is only partly fixed

[skjnldsv]

@DBJRdev did you tried the fixes?

[JohanBoshoffWebAware]

Please could you send me the fixes as I cannot see from the list what has been fixed. I cannot seem to get it working.

[DBJRdev]

@skjnldsv : Uhm, I don't know what fixes I am supposed to include, I just used the totally fresh 18.0.2RC2 from yesterday evening, assuming the 18 day old closing of the issue had the solution in. Please give me a hint and I will follow you to give better feedback :)

[skjnldsv]

This is inplemented in upcomming 18 release (18.0.2)
Please try the RC version if you're confident enough or wait for upcoming release

[JohanBoshoffWebAware]

Thanks. Will wait for the upcoming stable release

[andreazaupa]

Little custom css fix (waiting for 18.0.2) .

#body-settings #app-content.user-list-grid{ display: block; }

#body-settings #app-content.user-list-grid .row > div.userActions .toggleUserActions, #body-settings #app-content.user-list-grid .row > form.userActions .toggleUserActions{background: #fff;}

I dont know if there is some side effect, only the first directive is necessary to fix.

[JohanBoshoffWebAware]

Your custom CSS works perfectly! Thank you!