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:/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:/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"