Merge pull request #1159 from pi-hole/fix/group_assignment_allow_overflow

Enable visibility of overflow in table-responsive
This commit is contained in:
Adam Warner
2020-02-17 15:11:27 +00:00
committed by GitHub
4 changed files with 103 additions and 7 deletions

View File

@@ -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++) {
@@ -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 =

View File

@@ -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++) {
@@ -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 =

View File

@@ -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++) {
@@ -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);
}