begin situation
edit s9 entry (remove test group)
next page, using numbered buttons at bottom of screen
thinkpad (other device) now displays wrong group assignment
refresh clients (menu), thinkpad device now shows correct group assignment
edit s9 entry (remove test group)
next page, using numbered buttons at bottom of screen
thinkpad (other device) now displays wrong group assignment
refresh clients (menu), thinkpad device now shows correct group assignment
Thanks for bringing this up. The rendering of the multiselect dropdown menus is a very fragile thing. I will check this next week when I'm back home.
Hi there,
I've missed to append underlines to the element's IDs (before + data.id) on that two lines on my last change.
Maybe this causes this wrong behavior.
BTW, I think I also found the reason why the dropdown button sometimes moves when the multiselect popup is shown.
Looking forward to PRs 
I'm just reviewing your tabs PR.
A new alternative is in the works, cf.,
The previously mentioned PR is superseded by
Could you also test this branch @jpgpi250 ? I will return to my testing environment probably on Tuesday.
Instructions for testing:
cd /var/www/html/admin
sudo git checkout -b Th3M3-th3m3/improve_group-select release/v5.0
sudo git pull https://github.com/Th3M3/AdminLTE.git th3m3/improve_group-select
As instructed, updated. result:
sudo git pull https://github.com/Th3M3/AdminLTE.git th3m3/improve_group-select
remote: Enumerating objects: 159, done.
remote: Counting objects: 100% (74/74), done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 19 (delta 10), reused 19 (delta 10), pack-reused 0
Unpacking objects: 100% (19/19), done.
From https://github.com/Th3M3/AdminLTE
* branch th3m3/improve_group-select -> FETCH_HEAD
Updating bc9c656..76c7b63
Fast-forward
scripts/pi-hole/js/groups-adlists.js | 78 +-
scripts/pi-hole/js/groups-clients.js | 79 +-
scripts/pi-hole/js/groups-common.js | 22 +-
scripts/pi-hole/js/groups-domains.js | 79 +-
scripts/pi-hole/php/header.php | 4 +-
style/pi-hole.css | 5 +
.../vendor/bootstrap/css/bootstrap-multiselect.css | 1 -
.../vendor/bootstrap/css/bootstrap-select.min.css | 6 +
style/vendor/bootstrap/js/bootstrap-multiselect.js | 1716 --------------------
style/vendor/bootstrap/js/bootstrap-select.min.js | 9 +
10 files changed, 157 insertions(+), 1842 deletions(-)
delete mode 100644 style/vendor/bootstrap/css/bootstrap-multiselect.css
create mode 100644 style/vendor/bootstrap/css/bootstrap-select.min.css
delete mode 100644 style/vendor/bootstrap/js/bootstrap-multiselect.js
create mode 100644 style/vendor/bootstrap/js/bootstrap-select.min.js
The problem, indicated initially (wrong status after next page) is solved.
I do want to point out the following: When changing assignements (deselect a group, it is necessary to click somewhere on the page, before the change is actually performed (see screen shots)
begin situation:
unselecting test group, the selection count changes immediatlly , but the drop down (select list) remains on screen (I'm editing this reply in another tab, no changes on the admin page):
until I click somewhere (anywhere) on the page:
Is this intentional or should the selection box disappear?
The dropdown doesn't close itself after a selection, but this was the case so far too.
There is (and was) a click or touch (to somewhere else or to the button again) needed get the menu closed.
So my idea was to apply the changes only after the dropdown menu gets closed (e.g. by clicking the button again) and to avoid a mass of popups during selection as shown on animated gif:
But surely the code can be modified so that selected groups get applied immediately 
I understand, making multiple changes will create a mass of popups, which is undesirable. The question is, if that will ever happen. A user creates a group, and than adds a client to that group. Worst case, he will also remove the unassigned group, thus creating two popups. He than will move on to the next client, to repeat the assignment (example add all android devices to an android group).
It's not up to me to decide how this will work...
Optionally (if you decide to keep the current method), would it be possible to show a tooltip on the button (as soon as the content changes), indicating something like "click to apply changes" It currently isn't very clear what it is, you need to do to apply and continue...
I'd also be in favor of some button or hint you have to click outside of the select box or whatever. FTL has to do a lot of work whenever such a green popup appears, for instance, has to reload all prepared database statements for all clients as it cannot know which group assignment got changed and what the effect is.
As you can see, we squeezed every single drop out of it to have it perform reasonably fast, however, the less load on FTL, the better (mainly thinking about Pi Zero and similar hardware).
1 Like
Sorry I didn't get back to you sooner.
I've been searching for a solution for the past few days. But unfortunately it is not easy to realize, because every solution attempt leads to new problems (on smartphones):
-
A button outside the dropdown menu will not be reachable on small screens, because Bootstrap adds a transparent layer (
dropdown-backdrop) between the dropdown menu and the back site. -
A tooltip would sometimes protrude into the dropdown menu or be hidden below it.
One way would be to place an Apply button inside the dropdown menu. A click outside would then close the menu without changes.
animated gif from a small screen
animated gif from a nomal sized screen
Or we change the behaviour back so that every selection is applied immediately.
2 Likes
I would prefer this (apply button) over a hint, also i have personally tested the changes, i like this alot 
I concur that the button seems to be a nice (and usage-wise obvious!) solution.
Merged into release/v5.0 !
1 Like