fix(footer): fix Custom Footer styling issues with Bootstrap 4

ghiscoding · Jan 20, 2020 · 658a9fd · 658a9fd
1 parent 9f5c38e
commit 658a9fd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html
@@ -10,13 +10,13 @@
   </slick-pagination>
 
   <!-- Custom Footer section under the grid -->
-  <div *ngIf="showCustomFooter && customFooterOptions" class="slick-custom-footer" style="width: 100%;"
+  <div *ngIf="showCustomFooter && customFooterOptions" class="slick-custom-footer row" style="width: 100%;"
     [style.height]="customFooterOptions?.footerHeight || 20">
-    <span class="left-footer" [ngClass]="customFooterOptions.leftContainerClass">
+    <div class="left-footer" [ngClass]="customFooterOptions.leftContainerClass">
       {{customFooterOptions.leftFooterText}}
-    </span>
+    </div>
 
-    <span class="right-footer metrics" [ngClass]="customFooterOptions.rightContainerClass"
+    <div class="right-footer metrics" [ngClass]="customFooterOptions.rightContainerClass"
       *ngIf="metrics && !customFooterOptions.hideMetrics">
       <span *ngIf="!customFooterOptions.hideLastUpdateTimestamp">
         <span>{{customFooterOptions.metricTexts?.lastUpdate}}</span>
@@ -30,6 +30,6 @@
         {{metrics.totalItemCount}}
       </span>
       {{customFooterOptions.metricTexts?.items}}
-    </span>
+    </div>
   </div>
 </div>
diff --git a/src/app/modules/angular-slickgrid/models/customFooterOption.interface.ts b/src/app/modules/angular-slickgrid/models/customFooterOption.interface.ts
@@ -14,7 +14,10 @@ export interface CustomFooterOption {
   /** Defaults to false, do we want to hide the last update timestamp (endTime)? */
   hideLastUpdateTimestamp?: boolean;
 
-  /** Defaults to false, do we want to hide the metrics when the footer is displayed? */
+  /**
+   * Defaults to false, do we want to hide the metrics (right section) when the footer is displayed?
+   * That could be used when we want to display only the left section with custom text
+   */
   hideMetrics?: boolean;
 
   /** Defaults to false, do we want to hide the total item count of the entire dataset (the count exclude any filtered data) */