Fix #110

Author: lcdsantos

bower.json

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

package.json

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

public/jquery.selectric.js

@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric ϟ v1.9.5 (Mar 13 2016) - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric ϟ v1.9.6 (Mar 24 2016) - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2016 Leonardo Santos; MIT License
  *
@@ -469,7 +469,21 @@
 
         // Detect is the options box is inside the window
         function _isInViewport() {
-          $outerWrapper.toggleClass(_this.classes.above, $outerWrapper.offset().top + $outerWrapper.outerHeight() + itemsHeight > $win.scrollTop() + $win.height());
+          var scrollTop = $win.scrollTop();
+          var winHeight = $win.height();
+          var uiPosX = $outerWrapper.offset().top;
+          var uiHeight = $outerWrapper.outerHeight();
+
+          var fitsDown = (uiPosX + uiHeight + itemsHeight) <= (scrollTop + winHeight);
+          var fitsAbove = (uiPosX - 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;
+
+          $outerWrapper.toggleClass(_this.classes.above, renderAbove);
         }
 
         // Close the select options box

public/jquery.selectric.min.js

@@ -1,5 +1,5 @@
 /*======================================
-  Selectric v1.9.5
+  Selectric v1.9.6
 ======================================*/
 
 .selectric-wrapper {

public/selectric.css

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

selectric.jquery.json

@@ -452,7 +452,21 @@
 
         // Detect is the options box is inside the window
         function _isInViewport() {
-          $outerWrapper.toggleClass(_this.classes.above, $outerWrapper.offset().top + $outerWrapper.outerHeight() + itemsHeight > $win.scrollTop() + $win.height());
+          var scrollTop = $win.scrollTop();
+          var winHeight = $win.height();
+          var uiPosX = $outerWrapper.offset().top;
+          var uiHeight = $outerWrapper.outerHeight();
+
+          var fitsDown = (uiPosX + uiHeight + itemsHeight) <= (scrollTop + winHeight);
+          var fitsAbove = (uiPosX - 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;
+
+          $outerWrapper.toggleClass(_this.classes.above, renderAbove);
         }
 
         // Close the select options box