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 <me@adamwarner.co.uk>

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