grid.Container: scrolling concept #6180

Author: tobiu

resources/scss/src/grid/Container.scss

@@ -1,5 +1,6 @@
 .neo-grid-wrapper {
-    position: relative;
+    overflow-x: auto;
+    position  : relative;
 }
 
 .neo-grid-container {
@@ -10,7 +11,6 @@
     font-weight   : 400;
     height        : 100%;
     line-height   : 19px;
-    overflow      : hidden;
     position      : absolute;
     width         : 100%;
 
@@ -69,9 +69,4 @@
         padding         : 2px 10px 2px;
         width           : fit-content;
     }
-
-    .neo-grid-view-wrapper {
-        overflow: auto;
-        position: relative;
-    }
 }

resources/scss/src/grid/View.scss

@@ -1,4 +1,20 @@
+.neo-grid-view-wrapper {
+    overflow-x: hidden;
+    overflow-y: auto;
+    position  : relative;
+
+    .neo-grid-scrollbar {
+        height        : 1px;
+        position      : absolute;
+        top           : 0;
+        visibility    : hidden;
+        width         : 1px;
+    }
+}
+
 .neo-grid-view {
+    overflow-x: visible;
+
     &.neo-is-scrolling * {
         pointer-events: none !important;
     }
@@ -77,13 +93,3 @@
         }
     }
 }
-
-.neo-grid-view-wrapper {
-    .neo-grid-scrollbar {
-        height        : 1px;
-        position      : absolute;
-        top           : 0;
-        visibility    : hidden;
-        width         : 1px;
-    }
-}

resources/scss/src/grid/header/Button.scss

@@ -20,10 +20,8 @@
         border-right: 1px solid var(--grid-container-border-color);
     }
 
-    &.neo-locked { // todo: for testing, will get removed once the header toolbar is outside of the scroll region
-        position: sticky;
-        top     : 0;
-        z-index : 5001;
+    &.neo-locked {
+
     }
 
     &.neo-drag-over {

src/grid/View.mjs

@@ -187,6 +187,7 @@ class GridView extends Component {
      */
     afterSetAvailableWidth(value, oldValue) {
         if (value > 0) {
+            this.vdom.width = value + 'px';
             this.vdom.cn[1].width = value + 'px';
             this.update()
         }
@@ -496,10 +497,6 @@ class GridView extends Component {
         me.getVdomRoot().cn = rows;
 
         me.promiseUpdate().then(() => {
-            me.getDomRect(me.id).then(rect => {
-                me.availableWidth = rect.width
-            })
-
             if (selectedRows?.length > 0) {
                 // this logic only works for selection.grid.RowModel
                 Neo.main.DomAccess.scrollToTableRow({appName: me.appName, id: selectedRows[0]})

src/grid/header/Toolbar.mjs

@@ -62,7 +62,12 @@ class Toolbar extends BaseToolbar {
         let me = this;
 
         value && me.getDomRect(me.items.map(item => item.id)).then(rects => {
-            me.gridContainer.view.columnPositions = rects.map(item => ({width: item.width, x: item.x}))
+            let lastItem = rects[rects.length -1];
+
+            me.gridContainer.view.set({
+                availableWidth : lastItem.x + lastItem.width - rects[0].x,
+                columnPositions: rects.map(item => ({width: item.width, x: item.x}))
+            })
         })
     }