Add css rules for .ag-body-horizontal-scroll.ag-scrollbar-invisible

blackbaud · Sep 26, 2022 · e0ca4cc · e0ca4cc
1 parent 9a880a8
commit e0ca4cc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts
@@ -167,10 +167,19 @@ export class SkyAgGridWrapperComponent implements AfterContentInit, OnDestroy {
         '.ag-body-horizontal-scroll'
       );
       if (header && floatingBottom && scrollbar) {
+        if (
+          scrollbar.style.height !==
+          scrollbar.style.getPropertyValue(
+            '--sky-ag-body-horizontal-scroll-width'
+          )
+        ) {
+          scrollbar.style.setProperty(
+            '--sky-ag-body-horizontal-scroll-width',
+            scrollbar.style.height
+          );
+        }
         const isTop = !!root.children[1].matches('.ag-body-horizontal-scroll');
         if (toTop && !isTop) {
-          // AG Grid detects whether the scrollbar takes up space, but we want to leave space for it regardless.
-          scrollbar.classList.remove('ag-scrollbar-invisible');
           const fragment = this.document.createDocumentFragment();
           fragment.appendChild(scrollbar);
           header.after(fragment);

diff --git a/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss b/libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss
@@ -27,13 +27,22 @@ $sky-cell-wrap-text-line-height-modern: $sky-theme-modern-font-paragraph-line-he
 .sky-ag-grid.sky-ag-grid-top-scrollbar .ag-root {
   > .ag-body-viewport {
     .ag-center-cols-viewport {
+      /* Prevent a double scrollbar. */
       scrollbar-width: none;
 
       &::-webkit-scrollbar {
         display: none;
       }
     }
   }
+  .ag-body-horizontal-scroll.ag-scrollbar-invisible {
+    /* Value is overridden in SkyAgGridWrapperComponent to match the calculated value AG Grid uses. */
+    --sky-ag-body-horizontal-scroll-width: 15px;
+    position: relative;
+    z-index: 1;
+    bottom: revert;
+    margin-bottom: calc(var(--sky-ag-body-horizontal-scroll-width) * -1);
+  }
 }
 
 ag-grid-angular:not(.sky-ag-grid-editable) {