Maximise results on load

core/templates/base.html

@@ -208,6 +208,9 @@
       .grid-stack-item:hover .ui-resizable-handle {
         display: block !important;
       }
+      .ui-resizable-handle {
+        z-index: 39 !important;
+      }
 
     </style>
   </head>

core/templates/ui/drilldown/drilldown.html

@@ -75,10 +75,12 @@
     var grid = GridStack.init({
       cellHeight: 20,
       cellWidth: 50,
+      cellHeightUnit: 'px',
       auto: true,
       float: true,
       draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
       removable: false,
+      animate: true,
     });
     // GridStack.init();
     setupTags();
@@ -116,6 +118,25 @@
       // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
       htmx.process(widgetelement);
 
+      // update size when the widget is loaded
+      document.addEventListener('load-widget-results', function(evt) {
+        var added_widget = htmx.find(grid_element, '#drilldown-widget-results');
+        console.log(added_widget);
+        var itemContent = htmx.find(added_widget, ".control");
+        console.log(itemContent);
+        var scrollheight = itemContent.scrollHeight+80;
+        var verticalmargin = 0;
+        var cellheight = grid.opts.cellHeight;
+        var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
+        var opts = {
+          h: height,
+        }
+        grid.update(
+          added_widget,
+          opts
+        );
+      });
+
       // run the JS scripts inside the added element again
       // for instance, this will fix the dropdown
       for (var i = 0; i < scripts.length; i++) {

core/templates/widgets/table_results.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block widget_options %}
-  gs-w="10" gs-h="30" gs-y="10" gs-x="1"
+  gs-w="10" gs-h="1" gs-y="10" gs-x="1"
 {% endblock %}
 
 {% block heading %}

core/templates/wm/widget.html

@@ -32,6 +32,6 @@
   {% endblock %}
   var widget_event = new Event('load-widget');
   document.dispatchEvent(widget_event);
-  {% block custom_script_end %}
-  {% endblock %}
 </script>
+{% block custom_end %}
+{% endblock %}