diff --git a/examples/components/menu.html b/examples/components/menu.html index 5c66e2ab94..d5310ed449 100644 --- a/examples/components/menu.html +++ b/examples/components/menu.html @@ -147,6 +147,32 @@ + Link diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 28ff1b548f..d0023edae6 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -2374,6 +2374,12 @@ $.fn.dropdown = function(parameters) { else { module.set.upward($menu); } + if(module.is.fitWidth($menu)) { + module.remove.leftward($menu); + } + else { + module.set.leftward($menu); + } } else if(settings.direction == 'upward') { module.set.upward($menu); @@ -2383,6 +2389,10 @@ $.fn.dropdown = function(parameters) { var $element = $menu || $module; $element.addClass(className.upward); }, + leftward: function($menu) { + var $element = $menu || $module; + $element.addClass(className.leftward); + }, value: function(value, text, $selected) { var escapedValue = module.escape.value(value), @@ -2734,6 +2744,10 @@ $.fn.dropdown = function(parameters) { var $element = $menu || $module; $element.removeClass(className.upward); }, + leftward: function($menu) { + var $element = $menu || $module; + $element.removeClass(className.leftward); + }, visible: function() { $module.removeClass(className.visible); }, @@ -3096,6 +3110,28 @@ $.fn.dropdown = function(parameters) { $currentMenu.removeClass(className.loading); return canOpenDownward; }, + fitWidth: function($subMenu) { + var + $currentMenu = $subMenu || $menu, + canOpenRightward = true, + isOutsideScreen = false, + calculations + ; + $currentMenu.addClass(className.loading); + calculations = { + contextWidth: $context.outerWidth(), + menuOffset: $currentMenu.offset().left, + menuWidth: $currentMenu.outerWidth() + }; + isOutsideScreen = (calculations.contextWidth < calculations.menuOffset + calculations.menuWidth) || (calculations.menuOffset - $menu.offset().left < 0); + + if(isOutsideScreen) { + module.verbose('Dropdown cannot fit in context rightward', isOutsideScreen); + canOpenRightward = false; + } + $currentMenu.removeClass(className.loading); + return canOpenRightward; + }, inObject: function(needle, object) { var found = false @@ -3276,7 +3312,12 @@ $.fn.dropdown = function(parameters) { onStart : start, onComplete : function() { if(settings.direction == 'auto') { - module.remove.upward($subMenu); + if ($currentMenu.hasClass(className.leftward)) { + module.remove.leftward($subMenu); + } + else { + module.remove.upward($subMenu); + } } callback.call(element); } @@ -3707,6 +3748,7 @@ $.fn.dropdown.settings = { selected : 'selected', selection : 'selection', upward : 'upward', + leftward : 'left', visible : 'visible' } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index c6c4fa6202..8a8bb23ee2 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -956,6 +956,7 @@ select.ui.dropdown { /* Left Flyout Menu */ .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu { + display: block !important; left: auto !important; right: 100% !important; border-radius: @leftSubMenuBorderRadius !important;