Fix dropdown positioning when clicking the icon

samuelmc · Apr 24, 2018 · 22ef4d9 · 22ef4d9
1 parent f863ef5
commit 22ef4d9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/dist/css/foundation-select.css b/dist/css/foundation-select.css
@@ -1,6 +1,6 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.3.1
+ * Version 6.4.3
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */
@@ -71,17 +71,30 @@
         position: relative;
         max-height: 18.75rem; }
         .select-wrapper .select-container .select-dropdown > div ul, .select-wrapper .select-container .multiple-select > div ul {
+          padding: 0;
           margin: 0;
-          list-style-type: none; }
-          .select-wrapper .select-container .select-dropdown > div ul > li, .select-wrapper .select-container .multiple-select > div ul > li {
-            display: table-cell;
-            vertical-align: middle; }
-            [data-whatinput='mouse'] .select-wrapper .select-container .select-dropdown > div ul > li, [data-whatinput='mouse'] .select-wrapper .select-container .multiple-select > div ul > li {
-              outline: 0; }
-          .select-wrapper .select-container .select-dropdown > div ul > li > a, .select-wrapper .select-container .multiple-select > div ul > li > a {
+          list-style: none;
+          position: relative;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
+          -ms-flex-wrap: nowrap;
+              flex-wrap: nowrap;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column; }
+          [data-whatinput='mouse'] .select-wrapper .select-container .select-dropdown > div ul li, [data-whatinput='mouse'] .select-wrapper .select-container .multiple-select > div ul li {
+            outline: 0; }
+          .select-wrapper .select-container .select-dropdown > div ul a,
+          .select-wrapper .select-container .select-dropdown > div ul .button, .select-wrapper .select-container .multiple-select > div ul a,
+          .select-wrapper .select-container .multiple-select > div ul .button {
+            line-height: 1;
+            text-decoration: none;
             display: block;
-            padding: 0.7rem 1rem;
-            line-height: 1; }
+            padding: 0.7rem 1rem; }
           .select-wrapper .select-container .select-dropdown > div ul input,
           .select-wrapper .select-container .select-dropdown > div ul select,
           .select-wrapper .select-container .select-dropdown > div ul a,
@@ -90,8 +103,8 @@
           .select-wrapper .select-container .multiple-select > div ul a,
           .select-wrapper .select-container .multiple-select > div ul button {
             margin-bottom: 0; }
-          .select-wrapper .select-container .select-dropdown > div ul > li, .select-wrapper .select-container .multiple-select > div ul > li {
-            display: block; }
+          .select-wrapper .select-container .select-dropdown > div ul input, .select-wrapper .select-container .multiple-select > div ul input {
+            display: inline-block; }
           .select-wrapper .select-container .select-dropdown > div ul li a, .select-wrapper .select-container .multiple-select > div ul li a {
             color: #0a0a0a;
             padding: 0.5rem;

diff --git a/dist/js/foundation.select.js b/dist/js/foundation.select.js
@@ -118,7 +118,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
                     'data-dropdown': '',
                     'data-v-offset': 0,
                     'data-h-offset': 0,
-                    'data-close-on-click': true
+                    'data-close-on-click': true,
+                    'data-position': 'bottom',
+                    'data-alignment': 'right'
                 });
                 this.$dropdown.append(this.$scroll);
                 $container.append(this.$dropdown);

diff --git a/dist/js/foundation.select.min.js b/dist/js/foundation.select.min.js
diff --git a/src/js/foundation.select.js b/src/js/foundation.select.js
@@ -108,7 +108,9 @@
                 'data-dropdown': '',
                 'data-v-offset': 0,
                 'data-h-offset': 0,
-                'data-close-on-click': true
+                'data-close-on-click': true,
+                'data-position': 'bottom',
+                'data-alignment': 'right'
             });
             this.$dropdown.append(this.$scroll);
             $container.append(this.$dropdown);