← back to Designer Wallcoverings

fix: improve dropdown positioning with wrapper container and overflow handling

00f0ccc25a93f122bb68d0f3aeff2c5e12dada0b · 2026-06-22 21:46:12 -0700 · Steve Abrams

- Add .sort-control-wrapper for inline positioning context
- Increase min-width to 140px for better dropdown space
- Add overflow: visible to collection-controls and related parents
- Target .filters-toolbar for Shopify theme compatibility
- Prevents native select dropdown from being clipped on left edge

Files touched

• M DW-Programming/shared-enhancements/sort-control-pill-style.js
• M DW-Programming/templates/grid-slider-template.html

Diff

commit 00f0ccc25a93f122bb68d0f3aeff2c5e12dada0b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:46:12 2026 -0700

    fix: improve dropdown positioning with wrapper container and overflow handling
    
    - Add .sort-control-wrapper for inline positioning context
    - Increase min-width to 140px for better dropdown space
    - Add overflow: visible to collection-controls and related parents
    - Target .filters-toolbar for Shopify theme compatibility
    - Prevents native select dropdown from being clipped on left edge
---
 .../shared-enhancements/sort-control-pill-style.js      | 17 ++++++++++++++++-
 DW-Programming/templates/grid-slider-template.html      |  7 ++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/DW-Programming/shared-enhancements/sort-control-pill-style.js b/DW-Programming/shared-enhancements/sort-control-pill-style.js
index c1c3936e..26978688 100644
--- a/DW-Programming/shared-enhancements/sort-control-pill-style.js
+++ b/DW-Programming/shared-enhancements/sort-control-pill-style.js
@@ -57,6 +57,13 @@
       flex-wrap: wrap;
     }
 
+    /* Wrapper for sort control to prevent dropdown cutoff */
+    .sort-control-wrapper {
+      display: inline-block;
+      position: relative;
+      margin-right: 8px;
+    }
+
     /* Ensure dropdown doesn't get clipped */
     select[data-sort],
     select[aria-label*="sort" i],
@@ -65,13 +72,21 @@
       position: relative;
       z-index: 100;
       max-width: 100%;
-      min-width: 120px;
+      min-width: 140px;
     }
 
     /* Fix for parent containers that might clip the dropdown */
     [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select {
       overflow: visible !important;
     }
+
+    /* Ensure collection controls container has proper overflow handling */
+    .collection-controls,
+    [class*="collection-controls"],
+    [class*="sort"],
+    .filters-toolbar {
+      overflow: visible !important;
+    }
   `;
   document.head.appendChild(style);
 })();
diff --git a/DW-Programming/templates/grid-slider-template.html b/DW-Programming/templates/grid-slider-template.html
index 85c4576d..b1ba289e 100644
--- a/DW-Programming/templates/grid-slider-template.html
+++ b/DW-Programming/templates/grid-slider-template.html
@@ -152,11 +152,12 @@
     select[data-sort]:focus, select[aria-label*="sort" i]:focus, .sort-select:focus, .collection-sort-select:focus {
       outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
     }
-    .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+    .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; overflow: visible !important; }
+    .sort-control-wrapper { display: inline-block; position: relative; margin-right: 8px; }
     select[data-sort], select[aria-label*="sort" i], .sort-select, .collection-sort-select {
-      position: relative; z-index: 100; max-width: 100%; min-width: 120px;
+      position: relative; z-index: 100; max-width: 100%; min-width: 140px;
     }
-    [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select {
+    [data-sort], [aria-label*="sort" i], .sort-select, .collection-sort-select, .filters-toolbar {
       overflow: visible !important;
     }
   `;

← 38f91012 fix: prevent sort dropdown from being clipped on the left  ·  back to Designer Wallcoverings  ·  auto-save: 2026-06-22T21:48:03 (3 files) — DW-Programming/gr b6630f50 →