Fix modal overflow and resizing issues (#6355)

panel/models/tabulator.ts

@@ -302,8 +302,10 @@ export class DataTabulatorView extends HTMLBoxView {
   _selection_updating: boolean = false
   _initializing: boolean
   _lastVerticalScrollbarTopPosition: number = 0;
+  _lastHorizontalScrollbarLeftPosition: number = 0;
   _applied_styles: boolean = false
   _building: boolean = false
+  _restore_scroll: boolean = false
 
   connect_signals(): void {
     super.connect_signals()
@@ -378,7 +380,7 @@ export class DataTabulatorView extends HTMLBoxView {
     this.connect(this.model.source.patching, () => {
       const inds = this.model.source.selected.indices
       this.updateOrAddData();
-      this.tabulator.rowManager.element.scrollTop = this._lastVerticalScrollbarTopPosition;
+      this.record_scroll()
       // Restore indices since updating data may have reset checkbox column
       this.model.source.selected.indices = inds;
     })
@@ -427,6 +429,7 @@ export class DataTabulatorView extends HTMLBoxView {
       this.renderChildren()
       this.setStyles()
     }
+    this._restore_scroll = true
   }
 
   after_layout(): void {
@@ -436,6 +439,11 @@ export class DataTabulatorView extends HTMLBoxView {
     this._initializing = false
   }
 
+  after_resize(): void {
+    super.after_resize()
+    this.redraw()
+  }
+
   setCSSClasses(el: HTMLDivElement): void {
     el.className = "pnx-tabulator tabulator"
     for (const cls of this.model.theme_classes)
@@ -492,14 +500,19 @@ export class DataTabulatorView extends HTMLBoxView {
       return cell.getColumn().getField() + ": " + cell.getValue();
     })
     this.tabulator.on("scrollVertical", debounce(() => {
+      this.record_scroll()
       this.setStyles()
     }, 50, false))
+    this.tabulator.on("scrollHorizontal", debounce(() => {
+      this.record_scroll()
+    }, 50, false))
 
     // Sync state with model
     this.tabulator.on("rowSelectionChanged", (data: any, rows: any, selected: any, deselected: any) => this.rowSelectionChanged(data, rows, selected, deselected))
     this.tabulator.on("rowClick", (e: any, row: any) => this.rowClicked(e, row))
     this.tabulator.on("cellEdited", (cell: any) => this.cellEdited(cell))
     this.tabulator.on("dataFiltering", (filters: any) => {
+      this.record_scroll()
       this.model.filters = filters
     })
     this.tabulator.on("dataFiltered", (_: any, rows: any[]) => {
@@ -925,6 +938,10 @@ export class DataTabulatorView extends HTMLBoxView {
   postUpdate(): void {
     this.setSelection()
     this.setStyles()
+    if (this._restore_scroll) {
+      this.restore_scroll()
+      this._restore_scroll = false
+    }
   }
 
   updateOrAddData(): void {
@@ -1058,7 +1075,22 @@ export class DataTabulatorView extends HTMLBoxView {
     this._selection_updating = false
   }
 
+  restore_scroll(): void {
+    const opts = {
+      top: this._lastVerticalScrollbarTopPosition,
+      left: this._lastHorizontalScrollbarLeftPosition,
+      behavior: "instant"
+    }
+    setTimeout(() => this.tabulator.rowManager.element.scrollTo(opts), 0)
+  }
+
   // Update model
+
+  record_scroll() {
+    this._lastVerticalScrollbarTopPosition = this.tabulator.rowManager.element.scrollTop
+    this._lastHorizontalScrollbarLeftPosition = this.tabulator.rowManager.element.scrollLeft
+  }
+
   rowClicked(e: any, row: any) {
     if (
         this._selection_updating ||

panel/template/base.py

@@ -555,7 +555,10 @@ class TemplateActions(ReactiveHTML):
     _template: ClassVar[str] = ""
 
     _scripts: ClassVar[Dict[str, List[str] | str]] = {
-        'open_modal': ["document.getElementById('pn-Modal').style.display = 'block'"],
+        'open_modal': ["""
+          document.getElementById('pn-Modal').style.display = 'block'
+          window.dispatchEvent(new Event('resize'));
+        """],
         'close_modal': ["document.getElementById('pn-Modal').style.display = 'none'"],
     }
 

panel/template/bootstrap/bootstrap.css

@@ -162,6 +162,7 @@ img.app-logo {
 .pn-modal-content {
   display: block;
   min-height: 42px;
+  overflow-x: auto;
 }
 
 .pn-modal-close {
@@ -182,8 +183,8 @@ img.app-logo {
 
 .pn-busy-container {
   align-items: center;
-  justify-content: center;
   display: flex;
+  justify-content: center;
   margin-left: auto;
 }
 

panel/template/fast/fast.css

@@ -366,3 +366,8 @@ fast-card {
   --background-color: var(--neutral-layer-floating);
   z-index: 10;
 }
+
+.pn-modal-content {
+  display: block;
+  overflow-x: auto;
+}

panel/template/fast/grid/fast_grid_template.html

@@ -183,7 +183,7 @@
       </div>
       <fast-dialog id="pn-Modal" hidden>
         <fast-button class="pn-modalclose" id="pn-closeModal">&times;</fast-button>
-	<div>
+	<div class="pn-modal-content">
           {% for doc in docs %}
           {% for root in doc.roots %}
           {% if "modal" in root.tags %}

panel/template/fast/list/fast_list_template.html

@@ -172,7 +172,7 @@
       </div>
       <fast-dialog id="pn-Modal" hidden>
         <fast-button class="pn-modal-close" id="pn-closeModal">&times;</fast-button>
-	<div>
+        <div class="pn-modal-content">
           {% for doc in docs %}
           {% for root in doc.roots %}
           {% if "modal" in root.tags %}

panel/template/vanilla/vanilla.css

@@ -199,12 +199,13 @@ a.navbar-brand {
 
 .pn-modal-content {
   background-color: var(--surface-color);
+  border: 1px solid #888;
   color: var(--surface-text-color);
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
+  overflow-x: auto;
   padding: 15px 20px 20px 20px;
-  border: 1px solid #888;
   width: 80% !important;
 }