allow autofit to work in streamlit

Author: cbouy

mols2grid/molgrid.py

@@ -581,6 +581,7 @@ def to_pages(self, subset=None, tooltip=None, n_cols=5, n_rows=3,
 
         template = env.get_template('pages.html')
         template_kwargs = dict(
+            padding = 18,
             width = width,
             height = self.img_size[1],
             border = border,
@@ -819,6 +820,7 @@ def to_table(self, subset=None, tooltip=None, n_cols=5,
 
         template = env.get_template('table.html')
         template_kwargs = dict(
+            padding = 18,
             border = border,
             textalign = textalign,
             cell_width = cell_width,
@@ -846,7 +848,7 @@ def display(self, width="100%", height=None, iframe_allow="clipboard-write",
         """
         doc = self.render(**kwargs)
         iframe = (env.get_template("html/iframe.html")
-                     .render(width=width, height=height, padding=18,
+                     .render(width=width, height=height,
                              allow=iframe_allow, doc=escape(doc)))
         return HTML(iframe)
 

mols2grid/templates/html/common_header.html

@@ -0,0 +1,9 @@
+<script>
+    function fit_height(obj) {
+        obj.style.height = 0;
+        var height = obj.contentDocument.body.scrollHeight + {{ padding }} + 'px';
+        obj.style.height = height;
+    }
+</script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

mols2grid/templates/html/iframe.html

@@ -1,10 +1,3 @@
-<script>
-    function fit_height(obj) {
-        obj.style.height = 0;
-        var height = obj.contentDocument.body.scrollHeight + {{ padding }} + 'px';
-        obj.style.height = height;
-    }
-</script>
 <iframe class="mols2grid-iframe" frameborder="0" width="{{ width }}"
 {% if height %}
 height="{{ height }}"

mols2grid/templates/html/pages_header.html

@@ -1,5 +1,4 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
+{% include 'html/common_header.html' %}
 <script src="https://unpkg.com/@rdkit/rdkit@2022.3.1/Code/MinimalLib/dist/RDKit_minimal.js"></script>

mols2grid/templates/js/pages.js

@@ -107,6 +107,6 @@ window
     listObj.update();
     // resize iframe to fit content
     if (window.frameElement) {
-        window.parent.fit_height(window.frameElement);
+        fit_height(window.frameElement);
     }
 });

mols2grid/templates/table.html

@@ -6,9 +6,8 @@
       /* custom CSS */
       {{ custom_css }}
     </style>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
+    {% include 'html/common_header.html' %}
     <!-- custom header -->
     {{ custom_header }}
   </head>
@@ -29,7 +28,7 @@
       })
       // resize iframe to fit content
       if (window.frameElement) {
-          window.parent.fit_height(window.frameElement);
+          fit_height(window.frameElement);
       }
     </script>
     {% endif %}