diff --git a/examples/components/menu.html b/examples/components/menu.html
index 5c66e2ab9..d5310ed44 100644
--- a/examples/components/menu.html
+++ b/examples/components/menu.html
@@ -147,6 +147,32 @@
+
+ Dropdown Left
+
+
Link
diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
index 28ff1b548..d0023edae 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 c6c4fa620..8a8bb23ee 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;