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.

Sign up for GitHub

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

Jump to bottom

Enable visibility of overflow in table-responsive #1159

Merged
merged 6 commits into from Feb 17, 2020
Merged

Enable visibility of overflow in table-responsive #1159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed24f5c
Enable visibility of overflow to table-responsive to ensure the group…
DL6ER Feb 16, 2020
9248b1e
Make dropdown selection boxes scrollable
PromoFaux Feb 16, 2020
b5e7764
drop up instead of down if there are less than 200 px to the bottom o…
PromoFaux Feb 16, 2020
a7a99ea
update multiselects on other group pages with the same logic
PromoFaux Feb 16, 2020
211bcc9
Whejn dropdown is shown, move it outside of the datatable container (…
PromoFaux Feb 16, 2020
596f5af
Merge branch 'release/v5.0' into fix/group_assignment_allow_overflow
PromoFaux Feb 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 34 additions & 2 deletions scripts/pi-hole/js/groups-adlists.js
View file
Open in desktop
Expand Up @@ -89,7 +89,11 @@ function initTable() {
comment.on("change", editAdlist);

$("td:eq(3)", row).empty();
$("td:eq(3)", row).append('<select id="multiselect" multiple="multiple"></select>');
$("td:eq(3)", row).append(
'<div id="selectHome' +
data.id +
'"><select id="multiselect" multiple="multiple"></select></div>'
);
var sel = $("#multiselect", row);
// Add all known groups
for (var i = 0; i < groups.length; i++) {
Expand All @@ -108,7 +112,35 @@ function initTable() {
// Select assigned groups
sel.val(data.groups);
// Initialize multiselect
sel.multiselect({ includeSelectAllOption: true });
sel.multiselect({
includeSelectAllOption: true,
buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
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");
}

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);

var button =
Expand Down
36 changes: 34 additions & 2 deletions scripts/pi-hole/js/groups-clients.js
View file
Open in desktop
Expand Up @@ -101,7 +101,11 @@ function initTable() {
$("td:eq(0)", row).html(ip_name);

$("td:eq(1)", row).empty();
$("td:eq(1)", row).append('<select id="multiselect" multiple="multiple"></select>');
$("td:eq(1)", row).append(
'<div id="selectHome' +
data.id +
'"><select id="multiselect" multiple="multiple"></select></div>'
);
var sel = $("#multiselect", row);
// Add all known groups
for (var i = 0; i < groups.length; i++) {
Expand All @@ -120,7 +124,35 @@ function initTable() {
// Select assigned groups
sel.val(data.groups);
// Initialize multiselect
sel.multiselect({ includeSelectAllOption: true });
sel.multiselect({
includeSelectAllOption: true,
buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
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");
}

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);

var button =
Expand Down
36 changes: 34 additions & 2 deletions scripts/pi-hole/js/groups-domains.js
View file
Open in desktop
Expand Up @@ -133,7 +133,11 @@ function initTable() {
// Show group assignment field only if in full domain management mode
if (table.column(5).visible()) {
$("td:eq(4)", row).empty();
$("td:eq(4)", row).append('<select id="multiselect" multiple="multiple"></select>');
$("td:eq(4)", row).append(
'<div id="selectHome' +
data.id +
'"><select id="multiselect" multiple="multiple"></select></div>'
);
var sel = $("#multiselect", row);
// Add all known groups
for (var i = 0; i < groups.length; i++) {
Expand All @@ -152,7 +156,35 @@ function initTable() {
// Select assigned groups
sel.val(data.groups);
// Initialize multiselect
sel.multiselect({ includeSelectAllOption: true });
sel.multiselect({
includeSelectAllOption: true,
buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
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");
}

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);
}

Expand Down
2 changes: 1 addition & 1 deletion style/pi-hole.css
View file
Open in desktop
Expand Up @@ -260,4 +260,4 @@ code.breakall

.pointer {
cursor: pointer;
}
}