Handle the fact that bottoms are special and commonly we want to allow overflow that...

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index c5493d06b7e08fcf7ee435c1e77d198f03965c99..500686528be4b08916b611a69dc53d796f0d62ba 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -133,7 +133,7 @@ class Dropdown extends Plugin {
     switch(this.position) {
       case 'bottom':
       case 'top':
-        return Rtl() ? 'left' : 'right';
+        return Rtl() ? 'right' : 'left';
       case 'left':
       case 'right':
         return 'bottom';
@@ -205,7 +205,7 @@ class Dropdown extends Plugin {
       // default coordinates to how we start, in case we can't figure out better
       var minCoordinates = {position: this.position, alignment: this.alignment};
       while(!this._positionsExhausted()) {
-        let overlap = Box.OverlapArea(this.$element, this.$parent);
+        let overlap = Box.OverlapArea(this.$element, this.$parent, false, false, this.options.allowBottomOverlap);
         if(overlap === 0) {
           return;
         }
@@ -488,6 +488,15 @@ Dropdown.defaults = {
    * @default false
    */
   allowOverlap: false,
+  /**
+   * Allow overlap of only the bottom of the container. This is the most common
+   * behavior for dropdowns, allowing the dropdown to extend the bottom of the
+   * screen but not otherwise influence or break out of the container.
+   * @option
+   * @type {boolean}
+   * @default true
+   */
+  allowBottomOverlap: true,
   /**
    * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
    * @option

diff --git a/js/foundation.util.box.js b/js/foundation.util.box.js
index f00bcc74bcb56003e0ef5189ab3df28ac709440c..7e989e75cfb75630b5cb97b2396902039692afba 100644 (file)
--- a/js/foundation.util.box.js
+++ b/js/foundation.util.box.js
@@ -21,13 +21,13 @@ var Box = {
  * @default if no parent object passed, detects collisions with `window`.
  * @returns {Boolean} - true if collision free, false if a collision in any direction.
  */
-function ImNotTouchingYou(element, parent, lrOnly, tbOnly) {
-  return OverlapArea(element, parent, lrOnly, tbOnly) === 0;
+function ImNotTouchingYou(element, parent, lrOnly, tbOnly, ignoreBottom) {
+  return OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) === 0;
 };
 
-function OverlapArea(element, parent, lrOnly, tbOnly) {
+function OverlapArea(element, parent, lrOnly, tbOnly, ignoreBottom) {
   var eleDims = GetDimensions(element),
-      topOver, bottomOver, leftOver, rightOver;
+  topOver, bottomOver, leftOver, rightOver;
   if (parent) {
     var parDims = GetDimensions(parent);
 
@@ -43,7 +43,7 @@ function OverlapArea(element, parent, lrOnly, tbOnly) {
     rightOver  = eleDims.windowDims.width - (eleDims.offset.left + eleDims.width);
   }
 
-  bottomOver = Math.min(bottomOver, 0);
+  bottomOver = ignoreBottom ? 0 : Math.min(bottomOver, 0);
   topOver    = Math.min(topOver, 0);
   leftOver   = Math.min(leftOver, 0);
   rightOver  = Math.min(rightOver, 0);