This repository was archived by the owner on Oct 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Add an append-to-body attribute for improved layering. #718
Closed
Closed
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
7f1628f
Add an `append-to-body` attribute to the `<ui-select-choices>` direct…
cmlenz 391e081
Add demo page to show and test the append-to-body option.
cmlenz a4e2f53
Move the dropdown element back to its original location in the DOM wh…
cmlenz 167325a
Remove bogus template changes.
cmlenz 39c3f84
These CSS selectors still need to be scoped to apply only to the Boot…
cmlenz File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| <!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; | ||
| } | ||
|
|
||
| /* Some additional styling to demonstrate that append-to-body helps achieve the proper z-index layering. */ | ||
| .select-box { | ||
| background: #fff; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
| .alert-info.positioned { | ||
| margin-top: 1em; | ||
| position: relative; | ||
| z-index: 10000; // The select2 dropdown has a z-index of 9999 | ||
| } | ||
| </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="appendToBodyDemo.startToggleTimer()" | ||
| ng-disabled="appendToBodyDemo.remainingTime"> | ||
| {{ appendToBodyDemo.remainingTime ? 'Toggling in ' + (appendToBodyDemo.remainingTime / 1000) + ' seconds' : 'Toggle ui-select presence' }} | ||
| </button> | ||
| <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button> | ||
|
|
||
| <div class="select-box" ng-if="appendToBodyDemo.present"> | ||
| <h3>Bootstrap theme</h3> | ||
| <p>Selected: {{address.selected.formatted_address}}</p> | ||
| <ui-select ng-model="address.selected" | ||
| theme="bootstrap" | ||
| ng-disabled="disabled" | ||
| reset-search-input="false" | ||
| style="width: 300px;" | ||
| title="Choose an address"> | ||
| <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match> | ||
| <ui-select-choices repeat="address in addresses track by $index" | ||
| append-to-body="true" | ||
| refresh="refreshAddresses($select.search)" | ||
| refresh-delay="0"> | ||
| <div ng-bind-html="address.formatted_address | highlight: $select.search"></div> | ||
| </ui-select-choices> | ||
| </ui-select> | ||
| <p class="alert alert-info positioned">The select dropdown menu should be displayed above this element.</p> | ||
| </div> | ||
|
|
||
| <div class="select-box" ng-if="appendToBodyDemo.present"> | ||
| <h3>Select2 theme</h3> | ||
| <p>Selected: {{person.selected}}</p> | ||
| <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person"> | ||
| <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}" | ||
| append-to-body="true"> | ||
| <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> | ||
| <p class="alert alert-info positioned">The select dropdown menu should be displayed above this element.</p> | ||
| </div> | ||
|
|
||
| <div class="select-box" ng-if="appendToBodyDemo.present"> | ||
| <h3>Selectize theme</h3> | ||
| <p>Selected: {{country.selected}}</p> | ||
| <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose a country"> | ||
| <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match> | ||
| <ui-select-choices repeat="country in countries | filter: $select.search" | ||
| append-to-body="true"> | ||
| <span ng-bind-html="country.name | highlight: $select.search"></span> | ||
| <small ng-bind-html="country.code | highlight: $select.search"></small> | ||
| </ui-select-choices> | ||
| </ui-select> | ||
| <p class="alert alert-info positioned">The select dropdown menu should be displayed above this element.</p> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -39,7 +39,7 @@ app.filter('propsFilter', function() { | |
| }; | ||
| }); | ||
|
|
||
| app.controller('DemoCtrl', function($scope, $http, $timeout) { | ||
| app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) { | ||
| $scope.disabled = undefined; | ||
| $scope.searchEnabled = undefined; | ||
|
|
||
|
|
@@ -143,6 +143,23 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) { | |
| $scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]]; | ||
| $scope.multipleDemo.selectedPeopleSimple = ['[email protected]','[email protected]']; | ||
|
|
||
| $scope.appendToBodyDemo = { | ||
| remainingToggleTime: 0, | ||
| present: true, | ||
| startToggleTimer: function() { | ||
| var scope = $scope.appendToBodyDemo; | ||
| var promise = $interval(function() { | ||
| if (scope.remainingTime < 1000) { | ||
| $interval.cancel(promise); | ||
| scope.present = !scope.present; | ||
| scope.remainingTime = 0; | ||
| } else { | ||
| scope.remainingTime -= 1000; | ||
| } | ||
| }, 1000); | ||
| scope.remainingTime = 3000; | ||
| } | ||
| }; | ||
|
|
||
| $scope.address = {}; | ||
| $scope.refreshAddresses = function(address) { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for keeping this lightweight 👍