From ed24f5c41a9bbfcfbc2dbdad58b4742fc5b9cc89 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 16 Feb 2020 09:07:22 +0100 Subject: [PATCH 1/5] Enable visibility of overflow to table-responsive to ensure the group assignment dropdown doesn't get hidden when opened. Signed-off-by: DL6ER --- style/pi-hole.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style/pi-hole.css b/style/pi-hole.css index b17a4a17..1aef8edd 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -72,6 +72,7 @@ .table-responsive { -webkit-overflow-scrolling: touch; + overflow: visible; } /* Optimize Queries-Table for small screens */ From 9248b1eaadc1b92c642894cb88860682bdcefa2c Mon Sep 17 00:00:00 2001 From: Adam Warner Date: Sun, 16 Feb 2020 13:31:34 +0000 Subject: [PATCH 2/5] Make dropdown selection boxes scrollable Signed-off-by: Adam Warner --- style/pi-hole.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/pi-hole.css b/style/pi-hole.css index 1aef8edd..1f2a3c35 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -252,3 +252,9 @@ td.highlight { .pointer { cursor: pointer; } + +.multiselect-container{ + + max-height:200px; + overflow:auto; + } \ No newline at end of file From b5e77648ad14d778fe4711e9c6e7ad7ea2a8d2fe Mon Sep 17 00:00:00 2001 From: Adam Warner Date: Sun, 16 Feb 2020 15:51:42 +0000 Subject: [PATCH 3/5] drop up instead of down if there are less than 200 px to the bottom of the screen Signed-off-by: Adam Warner --- scripts/pi-hole/js/groups-clients.js | 18 +++++++++++++++++- style/pi-hole.css | 8 +------- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js index 71e0e585..c5a93224 100644 --- a/scripts/pi-hole/js/groups-clients.js +++ b/scripts/pi-hole/js/groups-clients.js @@ -120,7 +120,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", editClient); var button = diff --git a/style/pi-hole.css b/style/pi-hole.css index 1f2a3c35..fa1600f7 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -251,10 +251,4 @@ td.highlight { .pointer { cursor: pointer; -} - -.multiselect-container{ - - max-height:200px; - overflow:auto; - } \ No newline at end of file +} \ No newline at end of file From a7a99ea69342b690af33edcdadb6708fde0f18ff Mon Sep 17 00:00:00 2001 From: Adam Warner Date: Sun, 16 Feb 2020 16:10:14 +0000 Subject: [PATCH 4/5] update multiselects on other group pages with the same logic Signed-off-by: Adam Warner --- scripts/pi-hole/js/groups-adlists.js | 18 +++++++++++++++++- scripts/pi-hole/js/groups-domains.js | 18 +++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) 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 = From 211bcc999f4a140f540884c6e2d43df70b384b63 Mon Sep 17 00:00:00 2001 From: Adam Warner Date: Sun, 16 Feb 2020 17:33:52 +0000 Subject: [PATCH 5/5] Whejn dropdown is shown, move it outside of the datatable container (at the same absolute position) When it is closed, put it back where it came from Signed-off-by: Adam Warner --- scripts/pi-hole/js/groups-adlists.js | 18 +++++++++++++++++- scripts/pi-hole/js/groups-clients.js | 18 +++++++++++++++++- scripts/pi-hole/js/groups-domains.js | 18 +++++++++++++++++- style/pi-hole.css | 1 - 4 files changed, 51 insertions(+), 4 deletions(-) diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js index 96b0316e..0c5bc604 100644 --- a/scripts/pi-hole/js/groups-adlists.js +++ b/scripts/pi-hole/js/groups-adlists.js @@ -89,7 +89,11 @@ function initTable() { comment.on("change", editAdlist); $("td:eq(3)", row).empty(); - $("td:eq(3)", row).append(''); + $("td:eq(3)", row).append( + '
' + ); var sel = $("#multiselect", row); // Add all known groups for (var i = 0; i < groups.length; i++) { @@ -123,6 +127,18 @@ function initTable() { if (bottom > 200) { el.removeClass("dropup"); } + + var offset = el.offset(); + $("body").append(el); + el.css("position", "absolute"); + el.css("top", offset.top + "px"); + el.css("left", offset.left + "px"); + }, + onDropdownHide: function() { + var el = $("#container" + data.id); + var home = $("#selectHome" + data.id); + home.append(el); + el.removeAttr("style"); } }); sel.on("change", editAdlist); diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js index c5a93224..14d9323e 100644 --- a/scripts/pi-hole/js/groups-clients.js +++ b/scripts/pi-hole/js/groups-clients.js @@ -101,7 +101,11 @@ function initTable() { $("td:eq(0)", row).html(ip_name); $("td:eq(1)", row).empty(); - $("td:eq(1)", row).append(''); + $("td:eq(1)", row).append( + '
' + ); var sel = $("#multiselect", row); // Add all known groups for (var i = 0; i < groups.length; i++) { @@ -135,6 +139,18 @@ function initTable() { if (bottom > 200) { el.removeClass("dropup"); } + + var offset = el.offset(); + $("body").append(el); + el.css("position", "absolute"); + el.css("top", offset.top + "px"); + el.css("left", offset.left + "px"); + }, + onDropdownHide: function() { + var el = $("#container" + data.id); + var home = $("#selectHome" + data.id); + home.append(el); + el.removeAttr("style"); } }); sel.on("change", editClient); diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js index dbf0d1f1..ee3b1b7f 100644 --- a/scripts/pi-hole/js/groups-domains.js +++ b/scripts/pi-hole/js/groups-domains.js @@ -114,7 +114,11 @@ function initTable() { $("#comment", row).on("change", editDomain); $("td:eq(4)", row).empty(); - $("td:eq(4)", row).append(''); + $("td:eq(4)", row).append( + '
' + ); var sel = $("#multiselect", row); // Add all known groups for (var i = 0; i < groups.length; i++) { @@ -155,6 +159,18 @@ function initTable() { if (bottom > 200) { el.removeClass("dropup"); } + + var offset = el.offset(); + $("body").append(el); + el.css("position", "absolute"); + el.css("top", offset.top + "px"); + el.css("left", offset.left + "px"); + }, + onDropdownHide: function() { + var el = $("#container" + data.id); + var home = $("#selectHome" + data.id); + home.append(el); + el.removeAttr("style"); } }); sel.on("change", editDomain); diff --git a/style/pi-hole.css b/style/pi-hole.css index fa1600f7..d116a8a2 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -72,7 +72,6 @@ .table-responsive { -webkit-overflow-scrolling: touch; - overflow: visible; } /* Optimize Queries-Table for small screens */