Merge pull request #4173 from IgniteUI/fix-4161

fix(grid): fix grid cells are not aligned with the column headers
IgniteUI · Mar 6, 2019 · 6a376c5 · 6a376c5
2 parents 784d643 + 5c4dcbf
commit 6a376c5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -492,6 +492,10 @@
             @extend %igx-grid__grouparea--cosy !optional;
         }
 
+        @include e(header-indentation) {
+            @extend %igx-grid__header-indentation--cosy !optional;
+        }
+
         @include e(grouping-indicator) {
             @extend %igx-grid__grouping-indicator--cosy !optional;
         }
@@ -584,6 +588,10 @@
             @extend %igx-grid__grouparea--compact !optional;
         }
 
+        @include e(header-indentation) {
+            @extend %igx-grid__header-indentation--compact !optional;
+        }
+
         @include e(grouping-indicator) {
             @extend %igx-grid__grouping-indicator--compact !optional;
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1640,11 +1640,19 @@
 
     %igx-grid__header-indentation {
         position: relative;
-        padding-right: $grouping-padding-right;
+        padding-right: map-get($grid-grouping-indicator-padding, 'comfortable');
         background: --var($theme, 'header-background');
         z-index: 1;
     }
 
+    %igx-grid__header-indentation--cosy {
+        padding-right: map-get($grid-grouping-indicator-padding, 'cosy');
+    }
+
+    %igx-grid__header-indentation--compact {
+        padding-right: map-get($grid-grouping-indicator-padding, 'compact');
+    }
+
     %igx-grid__group-expand-btn {
         position: absolute;
         cursor: pointer;