feat: allow setting browser scrollbar width via CSS variable

telerik · Jun 15, 2021 · 4b4c560 · 4b4c560
1 parent d9a26cb
commit 4b4c560
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/packages/default/scss/dropdowngrid/_layout.scss b/packages/default/scss/dropdowngrid/_layout.scss
@@ -26,7 +26,6 @@
 
     // Header
     .k-dropdowngrid-popup .k-grid-header {
-        padding: 0;
         border-width: 0 0 1px 0;
         border-style: solid;
         border-color: inherit;

diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -214,7 +214,8 @@
                 white-space: nowrap;
             }
 
-            .k-grid-header-wrap {
+            .k-grid-header-wrap,
+            .k-grid-footer-wrap {
                 border-width: 0 0 0 $grid-cell-vertical-border-width;
             }
 
@@ -292,12 +293,6 @@
                 border-right-width: 0;
             }
 
-            .k-grid-header,
-            .k-grid-footer {
-                padding-left: $default-scrollbar-width;
-                padding-right: 0;
-            }
-
             .k-grid-header {
                 .k-header {
                     z-index: 1;
@@ -616,6 +611,8 @@
     }
 
     .k-grid-header {
+        padding-inline-start: 0;
+        padding-inline-end: var(--kendo-scrollbar-width, $default-scrollbar-width);
         border-bottom-width: 1px;
         font-size: $grid-header-font-size;
 
@@ -733,6 +730,8 @@
     }
 
     .k-grid-footer {
+        padding-inline-start: 0;
+        padding-inline-end: var(--kendo-scrollbar-width, $default-scrollbar-width);
         border-width: 1px 0 0;
 
         td {
@@ -1552,3 +1551,25 @@
         }
     }
 }
+
+@include exports("grid/layout/IE") {
+    // TODO: Remove once we drop IE support
+
+    $default-scrollbar-width: 17px;
+    .k-ie {
+        .k-grid-header,
+        .k-grid-footer {
+            padding-right: $default-scrollbar-width;
+            padding-left: 0;
+        }
+
+        [dir = "rtl"],
+        .k-rtl {
+            .k-grid-header,
+            .k-grid-footer {
+                padding-right: 0;
+                padding-left: $default-scrollbar-width;
+            }
+        }
+    }
+}