fix: Header Menu should be on top of grid not inside (#1033)

6pac · Jun 19, 2024 · b704a81 · b704a81
1 parent 71e0ef2
commit b704a81
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
@@ -681,7 +681,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     };
 
     Utils.emptyElement(this._container);
-    this._container.style.overflow = 'hidden';
     this._container.style.outline = String(0);
     this._container.classList.add(this.uid);
     this._container.classList.add('ui-widget');

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -140,4 +140,5 @@ $alpine-menu-border:                              1px solid #babfc7 !default;
 $alpine-menu-border-radius:                       2px !default;
 $alpine-menu-box-shadow:                          none !default;
 $alpine-menu-close-btn-background:                transparent !default;
-$alpine-menu-close-btn-border:                    1px solid #babfc7 !default;
+$alpine-menu-close-btn-border:                    1px solid #babfc7 !default;
+$alpine-menu-content-margin:                      2px 4px !default;
diff --git a/src/styles/slick-alpine-theme.scss b/src/styles/slick-alpine-theme.scss
@@ -542,6 +542,9 @@
 }
 
 .slick-header-menuitem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border: 1px solid transparent;
   list-style: none;
   margin: 0;
@@ -577,18 +580,19 @@
     }
   }
 
+  .slick-header-menucontent {
+    display: inline-block;
+    vertical-align: middle;
+    flex-grow: 1;
+    margin: var(--alpine-menu-content-margin, $alpine-menu-content-margin);
+    font-size: var(--alpine-font-size, $alpine-font-size);
+  }
+
   &:hover {
     border-color: var(--alpine-border-color, $alpine-border-color);
   }
 }
 
-.slick-header-menucontent {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 5px;
-  font-size: var(--alpine-font-size, $alpine-font-size);
-}
-
 .slick-pane {
   position: absolute;
   outline: 0;