fix(dropdown): columnar dropdowns on raw divs

When a dropdown was created out of prepared divs, the column menus were not working. That's because the previous approach was using display:inline-block which breaks when the sourcecode contains linebreaks. (Which a well formatted HTML source always has) It was working when a select tag was converted, but only because the generated HTML did not contain any whitespace This PR now switches to flexbox for column menus which does not care about linebreaks :) As the transition does block by default we had to teach dropdown to use flex when column menus are used
fomantic · Jun 25, 2020 · b2ae31b · b2ae31b
1 parent 4cff0d5
commit b2ae31b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
@@ -3533,9 +3533,12 @@ $.fn.dropdown = function(parameters) {
               module.set.scrollPosition(module.get.selectedItem(), true);
             }
             if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
+              var displayType = $module.hasClass('column') ? 'flex' : false;
               if(transition == 'none') {
                 start();
-                $currentMenu.transition('show');
+                $currentMenu.transition({
+                  displayType: displayType
+                }).transition('show');
                 callback.call(element);
               }
               else if($.fn.transition !== undefined && $module.transition('is supported')) {
@@ -3547,6 +3550,7 @@ $.fn.dropdown = function(parameters) {
                     duration   : settings.duration,
                     queue      : true,
                     onStart    : start,
+                    displayType: displayType,
                     onComplete : function() {
                       callback.call(element);
                     }

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -1261,20 +1261,19 @@ select.ui.dropdown {
 /*--------------
      Columnar
 ---------------*/
+.ui.column.dropdown > .menu {
+  flex-wrap:wrap;
+}
 .ui.dropdown[class*="two column"] > .menu > .item {
-  display: inline-block;
   width: 50%;
 }
 .ui.dropdown[class*="three column"] > .menu > .item {
-  display: inline-block;
   width: 33%;
 }
 .ui.dropdown[class*="four column"] > .menu > .item {
-  display: inline-block;
   width: 25%;
 }
 .ui.dropdown[class*="five column"] > .menu > .item {
-  display: inline-block;
   width: 20%;
 }