fix: add "frozen" class to all slick-pane for easier styling (#1089)

6pac · Nov 28, 2024 · 967c9d8 · 967c9d8
1 parent 1032280
commit 967c9d8
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git a/examples/example-auto-scroll-when-dragging.html b/examples/example-auto-scroll-when-dragging.html
@@ -23,10 +23,7 @@
     .slick-row:not(.slick-group) >.cell-unselectable {
       background: #efefef;
     }
-    .slick-row .slick-cell.frozen:last-child,
-    .slick-header-column.frozen:last-child,
-    .slick-headerrow-column.frozen:last-child,
-    .slick-footerrow-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1px solid red;
     }
 

diff --git a/examples/example-frozen-columns-and-rows.html b/examples/example-frozen-columns-and-rows.html
@@ -46,10 +46,7 @@
       box-sizing: border-box;
     }
 
-    .slick-row .slick-cell.frozen:last-child,
-    .slick-header-column.frozen:last-child,
-    .slick-headerrow-column.frozen:last-child,
-    .slick-footerrow-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1px solid #999;
     }
 

diff --git a/examples/example-frozen-columns-large.html b/examples/example-frozen-columns-large.html
@@ -31,7 +31,7 @@
       background-color: transparent; /* show default selected row background */
     }
 
-    .slick-cell.frozen:last-child, .slick-header-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1.5px dotted darkblue !important;
     }
     .options-panel {

diff --git a/examples/example-frozen-columns.html b/examples/example-frozen-columns.html
@@ -31,7 +31,7 @@
       background-color: transparent; /* show default selected row background */
     }
 
-    .slick-cell.frozen:last-child, .slick-header-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1.5px dotted darkblue !important;
     }
   </style>

diff --git a/src/slick.grid.ts b/src/slick.grid.ts
@@ -899,6 +899,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       this.setFrozenOptions();
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setScroller();
       this.setOverflow();
@@ -2306,6 +2307,14 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  /** add/remove frozen class to left headers/footer when defined */
+  protected setPaneFrozenClasses(): void {
+    const classAction = this.hasFrozenColumns() ? 'add' : 'remove';
+    for (const elm of [this._paneHeaderL, this._paneTopL, this._paneBottomL]) {
+      elm.classList[classAction]('frozen');
+    }
+  }
+
   protected setPaneVisibility() {
     if (this.hasFrozenColumns()) {
       Utils.show(this._paneHeaderR);
@@ -3580,6 +3589,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.updateColumnCaches();
 
     if (this.initialized) {
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setOverflow();
 

diff --git a/src/styles/slick-alpine-theme.scss b/src/styles/slick-alpine-theme.scss
@@ -597,6 +597,7 @@
 }
 
 .slick-pane {
+  box-sizing: border-box;
   position: absolute;
   outline: 0;
   overflow: hidden;