Fix modal overflow and resizing issues

holoviz · Feb 16, 2024 · 94df9c9 · 94df9c9
1 parent d35ad7a
commit 94df9c9
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 5 deletions.
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
@@ -436,6 +436,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)

diff --git a/panel/template/base.py b/panel/template/base.py
@@ -554,7 +554,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'"],
     }
 

diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css
@@ -161,6 +161,7 @@ img.app-logo {
 .pn-modal-content {
   display: block;
   min-height: 42px;
+  overflow-x: auto;
 }
 
 .pn-modal-close {
@@ -181,8 +182,8 @@ img.app-logo {
 
 .pn-busy-container {
   align-items: center;
-  justify-content: center;
   display: flex;
+  justify-content: center;
   margin-left: auto;
 }
 

diff --git a/panel/template/fast/fast.css b/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;
+}
diff --git a/panel/template/fast/grid/fast_grid_template.html b/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 %}

diff --git a/panel/template/fast/list/fast_list_template.html b/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 %}

diff --git a/panel/template/vanilla/vanilla.css b/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;
 }