Merge pull request #662 from AnthonyANI/fix-content-positioning

Fix content positioning for non-relative non-document body contentLocation elements

Author: brianvoe

src/slim-select/render.ts

@@ -1555,48 +1555,62 @@ export default class Render {
     return tempDiv.innerHTML
   }
 
-  public moveContentAbove(): void {
-    // Get main and content height
-    const mainHeight = this.main.main.offsetHeight
-    const contentHeight = this.content.main.offsetHeight
+  private setContentDirection(direction: 'above' | 'below'): void {
+    const isAbove = direction === 'above'
+    const addClass = isAbove ? this.classes.dirAbove : this.classes.dirBelow
+    const removeClass = isAbove ? this.classes.dirBelow : this.classes.dirAbove
 
     // Set direction classes on both main and content
-    this.main.main.classList.remove(this.classes.dirBelow)
-    this.main.main.classList.add(this.classes.dirAbove)
-    this.content.main.classList.remove(this.classes.dirBelow)
-    this.content.main.classList.add(this.classes.dirAbove)
+    this.main.main.classList.remove(removeClass)
+    this.main.main.classList.add(addClass)
+    this.content.main.classList.remove(removeClass)
+    this.content.main.classList.add(addClass)
+
+    // Set margin to position content
+    if (isAbove) {
+      const mainHeight = this.main.main.offsetHeight
+      const contentHeight = this.content.main.offsetHeight
+      this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px'
+    } else {
+      this.content.main.style.margin = '-1px 0px 0px 0px'
+    }
+  }
+
+  private setContentPosition(): void {
+    if (this.settings.contentPosition === 'relative') {
+      return
+    }
 
-    // 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 + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollY) + 'px'
-    this.content.main.style.left =
-      containerRect.left + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollX) + 'px'
+    let top: number
+    let left: number
+
+    if (this.settings.contentPosition === 'fixed') {
+      // Fixed positioning - use viewport coordinates directly
+      top = containerRect.top + containerRect.height
+      left = containerRect.left
+    } else {
+      // Absolute positioning - calculate relative to offsetParent
+      const offsetParent = this.content.main.offsetParent as HTMLElement
+      const offsetParentRect = offsetParent ? offsetParent.getBoundingClientRect() : { top: 0, left: 0 }
+
+      top = containerRect.top - offsetParentRect.top + containerRect.height - (offsetParent?.clientTop || 0)
+      left = containerRect.left - offsetParentRect.left - (offsetParent?.clientLeft || 0)
+    }
+
+    this.content.main.style.top = top + 'px'
+    this.content.main.style.left = left + 'px'
     this.content.main.style.width = containerRect.width + 'px'
   }
 
-  public moveContentBelow(): void {
-    // Set direction classes on both main and content
-    this.main.main.classList.remove(this.classes.dirAbove)
-    this.main.main.classList.add(this.classes.dirBelow)
-    this.content.main.classList.remove(this.classes.dirAbove)
-    this.content.main.classList.add(this.classes.dirBelow)
+  public moveContentAbove(): void {
+    this.setContentDirection('above')
+    this.setContentPosition()
+  }
 
-    // Set the content position
-    const containerRect = this.main.main.getBoundingClientRect()
-    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 +
-        (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'
-    }
+  public moveContentBelow(): void {
+    this.setContentDirection('below')
+    this.setContentPosition()
   }
 
   public ensureElementInView(container: HTMLElement, element: HTMLElement): void {

src/slim-select/slimselect.scss

@@ -362,6 +362,11 @@
     }
   }
 
+  &.ss-dir-above .ss-search {
+    border-bottom: none;
+    border-top: 1px solid var(--ss-border-color);
+  }
+
   .ss-list {
     flex: 1 1 auto;
     height: auto;