Add forceRenderAbove option

This options overrides the isInViewport detection and force the above class.

Author: SassNinja

README.md

@@ -248,6 +248,14 @@ $('select').selectric({
    */
   allowWrap: true,
 
+  /*
+   * Type: Boolean
+   * Description: By default the options box gets opened above if it's outside the window.
+   *              In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
+   *              you may force opening above.
+   */
+  forceRenderAbove: false,
+
   /*
    * Type: Object
    * Description: Customize select "multiple" behavior

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery-selectric",
   "description": "Fast, simple and light jQuery plugin to customize HTML selects",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "keywords": [
     "select",
     "selectbox",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "main": "public/jquery.selectric.js",
   "title": "jQuery Selectric",
   "author": {

public/demo.html

@@ -269,6 +269,22 @@ <h3>Custom markup for items box</h3>
       </div>
     </div>
 
+    <div class="demo">
+      <h3>Force render above</h3>
+
+      <div class="view">
+        <select id="forceRenderAbove">
+          <option value="lorem">lorem</option>
+          <option value="ipsum">ipsum</option>
+          <option value="dolor">dolor</option>
+        </select>
+      </div>
+
+      <div class="code">
+        <pre><code class="language-javascript">$('select').selectric({ forceRenderAbove: true });</code></pre>
+      </div>
+    </div>
+
     <div class="demo-spacer"></div>
   </div>
 

public/index.html

@@ -335,6 +335,14 @@ <h2>Options</h2>
      */
     allowWrap: true,
 
+    /*
+     * Type: Boolean
+     * Description: By default the options box gets opened above if it's outside the window.
+     *              In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
+     *              you may force opening above.
+     */
+    forceRenderAbove: false,
+
     /*
      * Type: Object
      * Description: Customize select "multiple" behavior

public/lib/demo.js

@@ -160,6 +160,8 @@
 
     $('#basic').selectric();
 
+    $('#forceRenderAbove').selectric({ forceRenderAbove: true });
+
     /*------------------------------------*/
 
     // Cache the target element

selectric.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "title": "jQuery Selectric",
   "author": {
     "name": "Leonardo Santos",

src/jquery.selectric.js

@@ -753,21 +753,26 @@
     /** Detect if the options box is inside the window */
     isInViewport: function() {
       var _this = this;
-      var scrollTop = $win.scrollTop();
-      var winHeight = $win.height();
-      var uiPosX = _this.elements.outerWrapper.offset().top;
-      var uiHeight = _this.elements.outerWrapper.outerHeight();
 
-      var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
-      var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
+      if (_this.options.forceRenderAbove === true) {
+        _this.elements.outerWrapper.addClass(_this.classes.above);
+      } else {
+        var scrollTop = $win.scrollTop();
+        var winHeight = $win.height();
+        var uiPosX = _this.elements.outerWrapper.offset().top;
+        var uiHeight = _this.elements.outerWrapper.outerHeight();
+
+        var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
+        var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
 
-      // If it does not fit below, only render it
-      // above it fit's there.
-      // It's acceptable that the user needs to
-      // scroll the viewport to see the cut off UI
-      var renderAbove = !fitsDown && fitsAbove;
+        // If it does not fit below, only render it
+        // above it fit's there.
+        // It's acceptable that the user needs to
+        // scroll the viewport to see the cut off UI
+        var renderAbove = !fitsDown && fitsAbove;
 
-      _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+        _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+      }
     },
 
     /**
@@ -1058,6 +1063,7 @@
     preventWindowScroll  : true,
     inheritOriginalWidth : false,
     allowWrap            : true,
+    forceRenderAbove     : false,
     stopPropagation      : true,
     optionsItemBuilder   : '{text}', // function(itemData, element, index)
     labelBuilder         : '{text}', // function(currItem)