diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js index f16e1bc5..96b0316e 100644 --- a/scripts/pi-hole/js/groups-adlists.js +++ b/scripts/pi-hole/js/groups-adlists.js @@ -108,7 +108,23 @@ function initTable() { // Select assigned groups sel.val(data.groups); // Initialize multiselect - sel.multiselect({ includeSelectAllOption: true }); + sel.multiselect({ + includeSelectAllOption: true, + buttonContainer: '
', + maxHeight: 200, + onDropdownShown: function() { + var el = $("#container" + data.id); + var top = el[0].getBoundingClientRect().top; + var bottom = $(window).height() - top - el.height(); + if (bottom < 200) { + el.addClass("dropup"); + } + + if (bottom > 200) { + el.removeClass("dropup"); + } + } + }); sel.on("change", editAdlist); var button = diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js index e48045e2..dbf0d1f1 100644 --- a/scripts/pi-hole/js/groups-domains.js +++ b/scripts/pi-hole/js/groups-domains.js @@ -140,7 +140,23 @@ function initTable() { // Select assigned groups sel.val(data.groups); // Initialize multiselect - sel.multiselect({ includeSelectAllOption: true }); + sel.multiselect({ + includeSelectAllOption: true, + buttonContainer: '', + maxHeight: 200, + onDropdownShown: function() { + var el = $("#container" + data.id); + var top = el[0].getBoundingClientRect().top; + var bottom = $(window).height() - top - el.height(); + if (bottom < 200) { + el.addClass("dropup"); + } + + if (bottom > 200) { + el.removeClass("dropup"); + } + } + }); sel.on("change", editDomain); var button =