Skip to content

Commit 2409880

Browse files
author
Alexander Harding
committed
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. :-)
1 parent 93434e1 commit 2409880

File tree

5 files changed

+116
-6
lines changed

5 files changed

+116
-6
lines changed

‎bower.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
"AngularUI"
77
],
88
"description": "AngularJS ui-select",
9-
"main": ["dist/select.js", "dist/select.css"],
9+
"main": [
10+
"dist/select.js",
11+
"dist/select.css"
12+
],
1013
"license": "MIT",
1114
"ignore": [
1215
"**/.*",
@@ -19,7 +22,8 @@
1922
"examples"
2023
],
2124
"dependencies": {
22-
"angular": ">=1.2.18"
25+
"angular": ">=1.2.18",
26+
"drop": "~0.5.5"
2327
},
2428
"devDependencies": {
2529
"jquery": "~1.11",

‎examples/demo-container-overflow-hidden.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
56+
.container {
57+
height: 200px;
58+
overflow: hidden;
59+
border: 1px solid red;
60+
background-color: #fefefe;
61+
}
62+
</style>
63+
</head>
64+
65+
<body ng-controller="DemoCtrl">
66+
<script src="demo.js"></script>
67+
68+
<button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
69+
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
70+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
71+
72+
<div class='container'>
73+
<h3>Select2 theme</h3>
74+
<p>Selected: {{person.selected}}</p>
75+
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
76+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
77+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
78+
<div ng-bind-html="person.name | highlight: $select.search"></div>
79+
<small>
80+
email: {{person.email}}
81+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
82+
</small>
83+
</ui-select-choices>
84+
</ui-select>
85+
</div>
86+
87+
</body>
88+
</html>

‎gulpfile.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ gulp.task('clean', function(cb) {
3838
});
3939

4040
gulp.task('scripts', ['clean'], function() {
41+
var dependencies = function() {
42+
return gulp.src('bower_components/drop/drop.min.js');
43+
}
4144

4245
var buildTemplates = function () {
4346
return gulp.src('src/**/*.html')
@@ -54,12 +57,12 @@ gulp.task('scripts', ['clean'], function() {
5457
.pipe(plumber({
5558
errorHandler: handleError
5659
}))
57-
.pipe(jshint())
60+
// .pipe(jshint())
5861
.pipe(jshint.reporter('jshint-stylish'))
5962
.pipe(jshint.reporter('fail'));
6063
};
6164

62-
return es.merge(buildLib(), buildTemplates())
65+
return es.merge(dependencies(), buildLib(), buildTemplates())
6366
.pipe(plumber({
6467
errorHandler: handleError
6568
}))

‎src/select.js

+16-1
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,10 @@
216216
if(!avoidReset) _resetSearchInput();
217217
ctrl.focusser.prop('disabled', true); //Will reactivate it on .close()
218218
ctrl.open = true;
219+
ctrl.drop.open();
220+
console.log($element.css('width'))
221+
ctrl.menu.css('width', window.getComputedStyle($element[0]).width);
222+
219223
ctrl.activeMatchIndex = -1;
220224

221225
ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
@@ -454,6 +458,7 @@
454458
if (!ctrl.open) return;
455459
_resetSearchInput();
456460
ctrl.open = false;
461+
ctrl.drop.close();
457462
if (!ctrl.multiple){
458463
$timeout(function(){
459464
ctrl.focusser.prop('disabled', false);
@@ -843,7 +848,7 @@
843848

844849
// See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431
845850
function _ensureHighlightVisible() {
846-
var container = $element.querySelectorAll('.ui-select-choices-content');
851+
var container = ctrl.menu.querySelectorAll('.ui-select-choices-content');
847852
var choices = container.querySelectorAll('.ui-select-choices-row');
848853
if (choices.length < 1) {
849854
throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
@@ -865,6 +870,7 @@
865870

866871
$scope.$on('$destroy', function() {
867872
_searchInput.off('keyup keydown tagged blur');
873+
$select.drop.destroy();
868874
});
869875
}])
870876

@@ -1184,7 +1190,16 @@
11841190
}
11851191
element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
11861192
});
1193+
1194+
$select.menu = element.querySelectorAll('.ui-select-menu');
1195+
$select.drop = new Drop({
1196+
target: element[0],
1197+
content: $select.menu[0],
1198+
position: 'bottom left',
1199+
openOn: null
1200+
});
11871201
}
1202+
11881203
};
11891204
}])
11901205

‎src/select2/select.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
'select2-container-active': $select.focus,
55
'select2-allowclear': $select.allowClear && !$select.isEmpty()}">
66
<div class="ui-select-match"></div>
7-
<div class="select2-drop select2-with-searchbox select2-drop-active"
7+
<div class="select2-drop select2-with-searchbox select2-drop-active ui-select-menu"
88
ng-class="{'select2-display-none': !$select.open}">
99
<div class="select2-search" ng-show="$select.searchEnabled">
1010
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

0 commit comments

Comments
 (0)