From b7199e38c51690ef583bc9b051003d2905cff929 Mon Sep 17 00:00:00 2001 From: Jerome Lam Date: Wed, 8 Apr 2015 14:51:07 -0400 Subject: [PATCH 1/6] Add "ui-select-dropdown" class to identify the dropdown container. --- src/bootstrap/choices.tpl.html | 2 +- src/select2/select-multiple.tpl.html | 4 ++-- src/select2/select.tpl.html | 2 +- src/selectize/choices.tpl.html | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index da1648f9c..17162bb1e 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -1,4 +1,4 @@ - -
- \ No newline at end of file + diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html index 4d2fbdecb..18edb54af 100644 --- 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()}">
-
+
From 02bebc0d48b0faf81a62bac3f0eb1f855db1f7dc Mon Sep 17 00:00:00 2001 From: Jerome Lam Date: Wed, 8 Apr 2015 14:58:09 -0400 Subject: [PATCH 2/6] Support changing the direction of the dropdown if there isn't enough space to render it. --- src/uiSelectDirective.js | 42 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js index 76df08b67..fc6cc4138 100644 --- a/src/uiSelectDirective.js +++ b/src/uiSelectDirective.js @@ -248,6 +248,48 @@ uis.directive('uiSelect', element[0].style.top = ''; element[0].style.width = originalWidth; } + + // Hold on to a reference to the .ui-select-dropdown element for direction support. + var dropdown = null, + directionUpClassName = 'direction-up'; + + // Support changing the direction of the dropdown if there isn't enough space to render it. + scope.$watch('$select.open', function(isOpen) { + if (isOpen) { + dropdown = angular.element(element).querySelectorAll('.ui-select-dropdown'); + if (dropdown === null) { + return; + } + + // Hide the dropdown so there is no flicker until $timeout is done executing. + dropdown[0].style.visibility = 'hidden'; + + // Delay positioning the dropdown until all choices have been added so its height is correct. + $timeout(function(){ + var offset = uisOffset(element); + var offsetDropdown = uisOffset(dropdown); + + // Determine if the direction of the dropdown needs to be changed. + if (offset.top + offset.height + offsetDropdown.height > $document[0].documentElement.scrollTop + $document[0].documentElement.clientHeight) { + dropdown[0].style.position = 'absolute'; + dropdown[0].style.top = (offsetDropdown.height * -1) + 'px'; + element.addClass(directionUpClassName); + } + + // Display the dropdown once it has been positioned. + dropdown[0].style.visibility = ''; + }); + } else { + if (dropdown === null) { + return; + } + + // Reset the position of the dropdown. + dropdown[0].style.position = ''; + dropdown[0].style.top = ''; + element.removeClass(directionUpClassName); + } + }); }; } }; From 79067ae74ce1f72fe053b7c30a834e749d8cf5dd Mon Sep 17 00:00:00 2001 From: Jerome Lam Date: Wed, 8 Apr 2015 14:59:01 -0400 Subject: [PATCH 3/6] Style the up direction of the dropdown. --- src/common.css | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/common.css b/src/common.css index 0a6494880..78122ad10 100644 --- a/src/common.css +++ b/src/common.css @@ -40,6 +40,28 @@ body > .select2-container.open { z-index: 9999; /* The z-index Select2 applies to the select2-drop */ } +/* Handle up direction Select2 */ +.ui-select-container[theme="select2"].direction-up .ui-select-match { + border-radius: 4px; /* FIXME hardcoded value :-/ */ + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.ui-select-container[theme="select2"].direction-up .ui-select-dropdown { + border-radius: 4px; /* FIXME hardcoded value :-/ */ + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + border-top-width: 1px; /* FIXME hardcoded value :-/ */ + border-top-style: solid; + + box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); + + margin-top: -4px; /* FIXME hardcoded value :-/ */ +} +.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search { + margin-top: 4px; /* FIXME hardcoded value :-/ */ +} + /* Selectize theme */ /* Helper class to show styles when focus */ @@ -62,6 +84,12 @@ body > .select2-container.open { border-color: #D44950; } +/* Handle up direction Selectize */ +.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown { + box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); + + margin-top: -2px; /* FIXME hardcoded value :-/ */ +} /* Bootstrap theme */ @@ -99,6 +127,11 @@ body > .select2-container.open { border-top-right-radius: 0; border-bottom-right-radius: 0; } +.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up { + border-radius: 4px !important; /* FIXME hardcoded value :-/ */ + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} .ui-select-bootstrap > .ui-select-match > .btn{ /* Instead of center because of .btn */ @@ -210,4 +243,9 @@ body > .ui-select-bootstrap.open { /* Mark invalid Bootstrap */ .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match { border-color: #D44950; -} \ No newline at end of file +} + +/* Handle up direction Bootstrap */ +.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown { + box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); +} From 9f29742278603d0c52764028659a6d66d94b4af9 Mon Sep 17 00:00:00 2001 From: Jerome Lam Date: Wed, 8 Apr 2015 15:00:17 -0400 Subject: [PATCH 4/6] Update version of angular to latest 1.2.x in examples. --- examples/bootstrap.html | 4 ++-- examples/select2-bootstrap3.html | 4 ++-- examples/selectize-bootstrap3.html | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/bootstrap.html b/examples/bootstrap.html index bdd8a4a5b..a1e362b46 100644 --- a/examples/bootstrap.html +++ b/examples/bootstrap.html @@ -18,8 +18,8 @@ - - + + diff --git a/examples/select2-bootstrap3.html b/examples/select2-bootstrap3.html index c898e38eb..1065e05c2 100644 --- a/examples/select2-bootstrap3.html +++ b/examples/select2-bootstrap3.html @@ -18,8 +18,8 @@ - - + + - - + +