grid.View: create a PoC to have the vertical scrollbar at the right e…

…dge of the wrapper container #6235 first try
neomjs · Feb 6, 2025 · 18a717b · 18a717b
1 parent 9eaa0b6
commit 18a717b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/resources/scss/src/grid/Container.scss b/resources/scss/src/grid/Container.scss
@@ -4,6 +4,16 @@
     overflow-y         : hidden;
     overscroll-behavior: none;
     position           : relative;
+
+    .neo-grid-scrollbar {
+        background-color: red;
+        bottom          : 0;
+        position        : absolute;
+        right           : 0;
+        top             : 31px; // header-toolbar height
+        width           : 16px;
+        z-index         : 2;
+    }
 }
 
 .neo-grid-container {
@@ -28,12 +38,6 @@
         z-index : 10;
     }
 
-    .neo-grid-body {
-        display   : block;
-        max-height: 300px; // an initial dummy value to reduce the flickering until the real height is available
-        overflow-y: scroll;
-    }
-
     .neo-grid-row:last-child {
         .neo-grid-cell {
             border-bottom-width: 0 !important;

diff --git a/src/grid/Container.mjs b/src/grid/Container.mjs
@@ -102,7 +102,10 @@ class GridContainer extends BaseContainer {
          */
         _vdom:
         {cls: ['neo-grid-wrapper'], cn: [
-            {'aria-rowcount': 1, cn: []} // aria-rowcount includes the column headers
+            {'aria-rowcount': 1, cn: []}, // aria-rowcount includes the column headers
+            {cls: ['neo-grid-scrollbar'], cn: [
+                {cls: ['neo-grid-scrollbar-content']}
+            ]}
         ]}
     }
 
@@ -147,8 +150,10 @@ class GridContainer extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module: GridView,
-            id    : me.viewId,
+            module       : GridView,
+            flex         : 1,
+            gridContainer: me,
+            id           : me.viewId,
             rowHeight,
             store,
             ...me.viewConfig