Add forceRenderBelow option + unit test

Author: SassNinja

README.md

@@ -256,6 +256,13 @@ $('select').selectric({
    */
   forceRenderAbove: false,
 
+  /*
+   * Type: Boolean
+   * Description: In some cases the options box gets opened above even though the desired behavior would be below.
+   *              If the auto dectection doesn't work as expected you may force opening below.
+   */
+  forceRenderBelow: 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.12.0",
+  "version": "1.13.0",
   "keywords": [
     "select",
     "selectbox",

package.json

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

public/demo.html

@@ -285,6 +285,22 @@ <h3>Force render above</h3>
       </div>
     </div>
 
+    <div class="demo">
+      <h3>Force render below</h3>
+
+      <div class="view">
+        <select id="forceRenderBelow">
+          <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({ forceRenderBelow: true });</code></pre>
+      </div>
+    </div>
+
     <div class="demo-spacer"></div>
   </div>
 

public/index.html

@@ -343,6 +343,13 @@ <h2>Options</h2>
      */
     forceRenderAbove: false,
 
+    /*
+     * Type: Boolean
+     * Description: In some cases the options box gets opened above even though the desired behavior would be below.
+     *              If the auto dectection doesn't work as expected you may force opening below.
+     */
+    forceRenderBelow: false,
+
     /*
      * Type: Object
      * Description: Customize select "multiple" behavior

public/lib/demo.js

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

src/jquery.selectric.js

@@ -27,7 +27,7 @@
   var $win = $(window);
 
   var pluginName = 'selectric';
-  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel';
+  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Below Scroll Group GroupLabel';
   var eventNamespaceSuffix = '.sl';
 
   var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
@@ -756,6 +756,8 @@
 
       if (_this.options.forceRenderAbove === true) {
         _this.elements.outerWrapper.addClass(_this.classes.above);
+      } else if (_this.options.forceRenderBelow === true) {
+        _this.elements.outerWrapper.addClass(_this.classes.below);
       } else {
         var scrollTop = $win.scrollTop();
         var winHeight = $win.height();
@@ -770,8 +772,10 @@
         // It's acceptable that the user needs to
         // scroll the viewport to see the cut off UI
         var renderAbove = !fitsDown && fitsAbove;
+        var renderBelow = !renderAbove;
 
         _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+        _this.elements.outerWrapper.toggleClass(_this.classes.below, renderBelow);
       }
     },
 
@@ -1064,6 +1068,7 @@
     inheritOriginalWidth : false,
     allowWrap            : true,
     forceRenderAbove     : false,
+    forceRenderBelow     : false,
     stopPropagation      : true,
     optionsItemBuilder   : '{text}', // function(itemData, element, index)
     labelBuilder         : '{text}', // function(currItem)

test/fixtures/options.html

@@ -5,4 +5,13 @@
     <option value="ipsum">ipsum</option>
     <option value="dolor">dolor</option>
   </select>
+</div>
+
+<div id="forceRenderBelow">
+  <label>forceRenderBelow</label>
+  <select>
+    <option value="lorem">lorem</option>
+    <option value="ipsum">ipsum</option>
+    <option value="dolor">dolor</option>
+  </select>
 </div>

test/options.spec.js

@@ -10,6 +10,7 @@ describe('options', function() {
     loadFixtures('options.html');
 
     $('#forceRenderAbove select').selectric({ forceRenderAbove: true });
+    $('#forceRenderBelow select').selectric({ forceRenderBelow: true });
   });
 
   it('should always have above class after initial open when using forceRenderAbove option', function() {
@@ -21,4 +22,13 @@ describe('options', function() {
     expect($('#forceRenderAbove').find('.selectric-wrapper').hasClass('selectric-above')).toBe(true);
   });
 
+  it('should always have below class after initial open when using forceRenderBelow option', function() {
+    // initial open
+    $('#forceRenderBelow').find('.selectric').trigger('click');
+    expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
+    // close afterwards
+    $('#forceRenderBelow').find('.selectric').trigger('click');
+    expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
+  });
+
 });