Fixed template visualization #6815 (#7520)

* fix(excel-style-filtering): fixed template visualization #6815

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: onlyexeption

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -108,7 +108,8 @@
 
     %grid-excel-sort {
         display: block;
-        padding: rem(8px) rem(16px);
+        padding-top: rem(8px);
+        padding-bottom: rem(8px);
 
         header {
             color: igx-color($palette, 'grays', 700);
@@ -239,7 +240,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(8px);
+            padding-top: rem(8px);
+            padding-bottom: rem(8px);
         }
 
         %grid-excel-actions {
@@ -271,7 +273,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(4px);
+            padding-top: rem(4px);
+            padding-bottom: rem(4px);
 
             @extend %grid-excel-action--compact;
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -84,11 +84,10 @@ <h4>{{ column.header || column.field }}</h4>
         </div>
     </header>
 
-    <div *ngIf="column.sortable">
-        <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
-    </div>
-
     <section class="igx-excel-filter__actions">
+        <div *ngIf="column.sortable">
+            <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
+        </div>
 
         <div *ngIf="column.movable">
             <ng-container *ngTemplateOutlet="movingTemplate"></ng-container>