Skip to content

Commit 559a9fa

Browse files
author
Brian Feister
committed
Merge pull request angular-ui#836 from JeromeLam/feat-dropdown-position
Issue angular-ui#148 - Add up direction to dropdown rendering.
2 parents 1e1d908 + 66307e4 commit 559a9fa

9 files changed

+95
-12
lines changed

‎examples/bootstrap.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</script>
1919
<![endif]-->
2020

21-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
22-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.js"></script>
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
2323
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
2424

2525
<!-- ui-select files -->

‎examples/select2-bootstrap3.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</script>
1919
<![endif]-->
2020

21-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
22-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
2323
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
2424

2525
<!--

‎examples/selectize-bootstrap3.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</script>
1919
<![endif]-->
2020

21-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
22-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
2323
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
2424

2525
<!--

‎src/bootstrap/choices.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ul class="ui-select-choices ui-select-choices-content dropdown-menu"
1+
<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
22
role="listbox"
33
ng-show="$select.items.length > 0">
44
<li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >

‎src/common.css

+42-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,31 @@ body > .select2-container.open {
4040
z-index: 9999; /* The z-index Select2 applies to the select2-drop */
4141
}
4242

43+
/* Handle up direction Select2 */
44+
.ui-select-container[theme="select2"].direction-up .ui-select-match {
45+
border-radius: 4px; /* FIXME hardcoded value :-/ */
46+
border-top-left-radius: 0;
47+
border-top-right-radius: 0;
48+
}
49+
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown {
50+
border-radius: 4px; /* FIXME hardcoded value :-/ */
51+
border-bottom-left-radius: 0;
52+
border-bottom-right-radius: 0;
53+
54+
border-top-width: 1px; /* FIXME hardcoded value :-/ */
55+
border-top-style: solid;
56+
57+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
58+
59+
margin-top: -4px; /* FIXME hardcoded value :-/ */
60+
}
61+
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search {
62+
margin-top: 4px; /* FIXME hardcoded value :-/ */
63+
}
64+
.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match {
65+
border-bottom-color: #5897fb;
66+
}
67+
4368
/* Selectize theme */
4469

4570
/* Helper class to show styles when focus */
@@ -62,6 +87,12 @@ body > .select2-container.open {
6287
border-color: #D44950;
6388
}
6489

90+
/* Handle up direction Selectize */
91+
.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
92+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
93+
94+
margin-top: -2px; /* FIXME hardcoded value :-/ */
95+
}
6596

6697
/* Bootstrap theme */
6798

@@ -99,6 +130,11 @@ body > .select2-container.open {
99130
border-top-right-radius: 0;
100131
border-bottom-right-radius: 0;
101132
}
133+
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
134+
border-radius: 4px !important; /* FIXME hardcoded value :-/ */
135+
border-top-right-radius: 0 !important;
136+
border-bottom-right-radius: 0 !important;
137+
}
102138

103139
.ui-select-bootstrap > .ui-select-match > .btn{
104140
/* Instead of center because of .btn */
@@ -210,4 +246,9 @@ body > .ui-select-bootstrap.open {
210246
/* Mark invalid Bootstrap */
211247
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
212248
border-color: #D44950;
213-
}
249+
}
250+
251+
/* Handle up direction Bootstrap */
252+
.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
253+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
254+
}

‎src/select2/select-multiple.tpl.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
ondrop="return false;">
2626
</li>
2727
</ul>
28-
<div class="select2-drop select2-with-searchbox select2-drop-active"
28+
<div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
2929
ng-class="{'select2-display-none': !$select.open}">
3030
<div class="ui-select-choices"></div>
3131
</div>
32-
</div>
32+
</div>

‎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="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
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"

‎src/selectize/choices.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
1+
<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single">
22
<div class="ui-select-choices-content selectize-dropdown-content">
33
<div class="ui-select-choices-group optgroup" role="listbox">
44
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind="$group.name"></div>

‎src/uiSelectDirective.js

+42
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,48 @@ uis.directive('uiSelect',
248248
element[0].style.top = '';
249249
element[0].style.width = originalWidth;
250250
}
251+
252+
// Hold on to a reference to the .ui-select-dropdown element for direction support.
253+
var dropdown = null,
254+
directionUpClassName = 'direction-up';
255+
256+
// Support changing the direction of the dropdown if there isn't enough space to render it.
257+
scope.$watch('$select.open', function(isOpen) {
258+
if (isOpen) {
259+
dropdown = angular.element(element).querySelectorAll('.ui-select-dropdown');
260+
if (dropdown === null) {
261+
return;
262+
}
263+
264+
// Hide the dropdown so there is no flicker until $timeout is done executing.
265+
dropdown[0].style.visibility = 'hidden';
266+
267+
// Delay positioning the dropdown until all choices have been added so its height is correct.
268+
$timeout(function(){
269+
var offset = uisOffset(element);
270+
var offsetDropdown = uisOffset(dropdown);
271+
272+
// Determine if the direction of the dropdown needs to be changed.
273+
if (offset.top + offset.height + offsetDropdown.height > $document[0].documentElement.scrollTop + $document[0].documentElement.clientHeight) {
274+
dropdown[0].style.position = 'absolute';
275+
dropdown[0].style.top = (offsetDropdown.height * -1) + 'px';
276+
element.addClass(directionUpClassName);
277+
}
278+
279+
// Display the dropdown once it has been positioned.
280+
dropdown[0].style.visibility = '';
281+
});
282+
} else {
283+
if (dropdown === null) {
284+
return;
285+
}
286+
287+
// Reset the position of the dropdown.
288+
dropdown[0].style.position = '';
289+
dropdown[0].style.top = '';
290+
element.removeClass(directionUpClassName);
291+
}
292+
});
251293
};
252294
}
253295
};

0 commit comments

Comments
 (0)