Variable - variable box scrollable

minjk-bl · minjk-bl · commit 7a7a92c509b7 · 2021-11-02T12:12:48.000+09:00
diff --git a/css/file_io/variables.css b/css/file_io/variables.css
@@ -1,14 +1,20 @@
 :root {
     --color: #525252;
 }
-#vp_var_variableBox table tr:not(:first-child):hover,
-#vp_var_variableBox table tr.selected {
+#vp_var_variableBox table tbody tr:hover,
+#vp_var_variableBox table tbody tr.selected {
     color: var(--font-hightlight);
     background-color: #F5F5F5;
 }
-#vp_var_variableBox table tr td:first-child:hover {
+#vp_var_variableBox table tbody tr td:hover {
     cursor: pointer;
 }
+#vp_var_variableBox table thead {
+    position: sticky;
+    top: 0;
+    background: white;
+}
+
 #vp_varDetailTable table th, 
 #vp_varDetailTable table td {
     padding: 5px;
@@ -25,7 +31,6 @@
 #vp_var_variableBox {
     width: 100%;
     height: 150px;
-    overflow: hidden;
 }
 #vp_varDetailTable:empty::after {
     content: '(Select variables to preview the data.)';
diff --git a/src/file_io/variables.html b/src/file_io/variables.html
@@ -1,11 +1,21 @@
 <div class="vp-option-page" id="vp_varPage">
-    <div id="vp_var_variableBox">
+    <div id="vp_var_variableBox" class="vp-scrollbar">
         <table class="vp-option-table vp-option-horizontal-table-layout">
             <colgroup><col width="150px"/><col width="*"/></colgroup>
-            <tr>
-                <th title="Refresh the list"><span class="vp-multilang" data-caption-id="varName">Variable Name</span><span id="vp_varRefresh"><img src="/nbextensions/visualpython/resource/refresh.svg"/></span></th>
-                <th title="Click to copy"><span class="vp-multilang" data-caption-id="dataType">Data Type</span></th>
-            </tr>
+            <thead>
+                <tr>
+                    <th>
+                        <span class="vp-multilang" data-caption-id="varName">Variable Name</span>
+                        <span id="vp_varRefresh"  title="Refresh the list"><img src="/nbextensions/visualpython/resource/refresh.svg"/></span>
+                    </th>
+                    <th>
+                        <span class="vp-multilang" data-caption-id="dataType">Data Type</span>
+                    </th>
+                </tr>   
+            </thead>
+            <tbody>
+                <!-- variable list -->
+            </tbody>
         </table>
     </div>
     <hr/>
diff --git a/src/file_io/variables.js b/src/file_io/variables.js
@@ -63,8 +63,6 @@ define([
         this.package = libPandas._PANDAS_FUNCTION[funcOptProp.libID];
     }
 
-
-
     /**
      * Extend vpFuncJS
      */
@@ -135,13 +133,13 @@ define([
             , 'str', 'int', 'float', 'bool', 'dict', 'list', 'tuple'
         ];
 
-        var tagTable = this.wrapSelector('#vp_var_variableBox table');
+        var tagTable = this.wrapSelector('#vp_var_variableBox table tbody');
 
         // variable list table
         var tagDetailTable = this.wrapSelector("#vp_varDetailTable");
         
         // initialize tags
-        $(tagTable).find('tr:not(:first)').remove();
+        $(tagTable).find('tr').remove();
         $(tagDetailTable).html('');
         
         // HTML rendering
