Fix #43: add position option.

2 files changed, 12 insertions, 2 deletions

diff --git a/jquery.multiple.select.js b/jquery.multiple.select.js
index 6d2ccf3..91fae5b 100644
--- a/jquery.multiple.select.js
+++ b/jquery.multiple.select.js
@@ -19,7 +19,7 @@
         this.$parent = $('<div class="ms-parent"></div>');
         this.$choice = $('<button type="button" class="ms-choice"><span class="placeholder">' +
             options.placeholder + '</span><div></div></button>');
-        this.$drop = $('<div class="ms-drop"></div>');
+        this.$drop = $('<div class="ms-drop ' + options.position + '"></div>');
         this.$el.after(this.$parent);
         this.$parent.append(this.$choice);
         this.$parent.append(this.$drop);
@@ -396,6 +396,7 @@
         width: undefined,
         maxHeight: 250,
         container: null,
+        position: 'bottom', // 'bottom' or 'top'
 
         onOpen: function() {return false;},
         onClose: function() {return false;},
diff --git a/multiple-select.css b/multiple-select.css
index 12cd7cb..8b8c84e 100644
--- a/multiple-select.css
+++ b/multiple-select.css
@@ -69,18 +69,27 @@
     padding: 0;
     position: absolute;
     z-index: 1000;
-    top: 100%;
     background: #fff;
     color: #000;
     border: 1px solid #aaa;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
+}
+
+.ms-drop.bottom {
+    top: 100%;
     -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
     -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
     box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
 }
 
+.ms-drop.top {
+    bottom: 100%;
+    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
 
 .ms-search {
     display: inline-block;