Merge pull request #581 from shibaobun/master

Add `fixed` contentPosition option
brianvoe · Nov 21, 2024 · 9ff6db9 · 9ff6db9
2 parents e49388c + 4ec48c9
commit 9ff6db9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/slim-select/render.ts b/src/slim-select/render.ts
@@ -154,7 +154,7 @@ export default class Render {
 
     // Misc classes
     // Add content position class
-    if (this.settings.contentPosition === 'relative') {
+    if (this.settings.contentPosition === 'relative' || this.settings.contentPosition === 'fixed') {
       this.content.main.classList.add('ss-' + this.settings.contentPosition)
     }
   }
@@ -1355,8 +1355,10 @@ export default class Render {
     // Set the content position
     const containerRect = this.main.main.getBoundingClientRect()
     this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px'
-    this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px'
-    this.content.main.style.left = containerRect.left + window.scrollX + 'px'
+    this.content.main.style.top =
+      containerRect.top + containerRect.height + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollY) + 'px'
+    this.content.main.style.left =
+      containerRect.left + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollX) + 'px'
     this.content.main.style.width = containerRect.width + 'px'
   }
 
@@ -1372,8 +1374,13 @@ export default class Render {
     this.content.main.style.margin = '-1px 0px 0px 0px'
     // Dont do anything if the content is relative
     if (this.settings.contentPosition !== 'relative') {
-      this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px'
-      this.content.main.style.left = containerRect.left + window.scrollX + 'px'
+      this.content.main.style.top =
+        containerRect.top +
+        containerRect.height +
+        (this.settings.contentPosition === 'fixed' ? 0 : window.scrollY) +
+        'px'
+      this.content.main.style.left =
+        containerRect.left + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollX) + 'px'
       this.content.main.style.width = containerRect.width + 'px'
     }
   }

diff --git a/src/slim-select/settings.ts b/src/slim-select/settings.ts
@@ -25,7 +25,7 @@ export default class Settings {
   public searchHighlight: boolean
   public closeOnSelect: boolean
   public contentLocation: HTMLElement | null
-  public contentPosition: 'relative' | 'absolute'
+  public contentPosition: 'relative' | 'absolute' | 'fixed'
   public openPosition: 'auto' | 'up' | 'down'
   public placeholderText: string
   public allowDeselect: boolean

diff --git a/src/slim-select/slimselect.scss b/src/slim-select/slimselect.scss
@@ -261,6 +261,10 @@
     height: 100%;
   }
 
+  &.ss-fixed {
+    position: fixed;
+  }
+
   &.ss-open-above {
     flex-direction: column-reverse;
     opacity: 1;