ce38cd5b9c
Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
323 lines
12 KiB
CSS
323 lines
12 KiB
CSS
.select2-container {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
margin: 0;
|
|
position: relative;
|
|
vertical-align: middle; }
|
|
|
|
.select2-selection--single {
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 28px;
|
|
user-select: none;
|
|
-webkit-user-select: none; }
|
|
.select2-selection--single .select2-selection__rendered {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
padding-right: 20px;
|
|
text-overflow: ellipsis; }
|
|
|
|
.select2-selection--multiple {
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: block;
|
|
min-height: 32px;
|
|
user-select: none;
|
|
-webkit-user-select: none; }
|
|
.select2-selection--multiple .select2-selection__rendered {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
text-overflow: ellipsis; }
|
|
|
|
.select2-search--inline {
|
|
float: left; }
|
|
.select2-search--inline .select2-search__field {
|
|
border: none;
|
|
font-size: 100%;
|
|
margin-top: 5px; }
|
|
|
|
.select2-dropdown {
|
|
background-color: white;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
left: -100000px;
|
|
width: 100%;
|
|
z-index: 100; }
|
|
|
|
.select2-results {
|
|
display: block; }
|
|
|
|
.select2-results__options {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
.select2-results__option {
|
|
padding: 6px;
|
|
user-select: none;
|
|
-webkit-user-select: none; }
|
|
.select2-results__option[aria-selected] {
|
|
cursor: pointer; }
|
|
|
|
.select2-container--open .select2-dropdown {
|
|
left: 0; }
|
|
|
|
.select2-container--open .select2-dropdown--above {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
|
|
.select2-container--open .select2-dropdown--below {
|
|
border-top: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0; }
|
|
|
|
.select2-search--dropdown {
|
|
display: block;
|
|
padding: 4px; }
|
|
.select2-search--dropdown .select2-search__field {
|
|
padding: 4px;
|
|
width: 100%; }
|
|
.select2-search--dropdown .select2-search--hide {
|
|
display: none; }
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
background-color: #fff;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px; }
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: #444;
|
|
line-height: 28px; }
|
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
|
cursor: pointer;
|
|
float: right;
|
|
font-weight: bold; }
|
|
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
|
color: #999; }
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
|
height: 26px;
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
width: 20px; }
|
|
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
|
border-color: #888 transparent transparent transparent;
|
|
border-style: solid;
|
|
border-width: 5px 4px 0 4px;
|
|
height: 0;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
margin-top: -2px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 0; }
|
|
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
|
border-color: transparent transparent #888 transparent;
|
|
border-width: 0 4px 5px 4px; }
|
|
.select2-container--default .select2-selection--multiple {
|
|
background-color: white;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
cursor: text; }
|
|
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 5px; }
|
|
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
|
|
color: #999;
|
|
margin-top: 5px;
|
|
float: left; }
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
|
background-color: #e4e4e4;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
cursor: default;
|
|
float: left;
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
padding: 0 5px; }
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: #999;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-right: 2px; }
|
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
|
|
color: #333; }
|
|
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0; }
|
|
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.select2-container--default .select2-search--dropdown .select2-search__field {
|
|
border: 1px solid #aaa; }
|
|
.select2-container--default .select2-search--inline .select2-search__field {
|
|
border: none;
|
|
outline: 0; }
|
|
.select2-container--default .select2-results > .select2-results__options {
|
|
max-height: 200px;
|
|
overflow-y: auto; }
|
|
.select2-container--default .select2-results__option[role=group] {
|
|
padding: 0; }
|
|
.select2-container--default .select2-results__option[aria-disabled=true] {
|
|
color: #999; }
|
|
.select2-container--default .select2-results__option[aria-selected=true] {
|
|
background-color: #ddd; }
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background-color: #5897fb;
|
|
color: white; }
|
|
.select2-container--default .select2-results__group {
|
|
cursor: default;
|
|
display: block;
|
|
padding: 6px; }
|
|
|
|
.select2-container--classic .select2-selection--single {
|
|
background-color: #f6f6f6;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
outline: 0;
|
|
background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%);
|
|
background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%);
|
|
background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
|
|
.select2-container--classic .select2-selection--single:focus {
|
|
border: 1px solid #5897fb; }
|
|
.select2-container--classic .select2-selection--single .select2-selection__rendered {
|
|
color: #444;
|
|
line-height: 28px; }
|
|
.select2-container--classic .select2-selection--single .select2-selection__clear {
|
|
cursor: pointer;
|
|
float: right;
|
|
font-weight: bold;
|
|
margin-right: 10px; }
|
|
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
|
|
color: #999; }
|
|
.select2-container--classic .select2-selection--single .select2-selection__arrow {
|
|
background-color: #ddd;
|
|
border: none;
|
|
border-left: 1px solid #aaa;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
height: 26px;
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
width: 20px;
|
|
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
|
|
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
|
|
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); }
|
|
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
|
|
border-color: #888 transparent transparent transparent;
|
|
border-style: solid;
|
|
border-width: 5px 4px 0 4px;
|
|
height: 0;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
margin-top: -2px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 0; }
|
|
.select2-container--classic.select2-container--open .select2-selection--single {
|
|
border: 1px solid #5897fb; }
|
|
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
|
|
background: transparent;
|
|
border: none; }
|
|
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
|
border-color: transparent transparent #888 transparent;
|
|
border-width: 0 4px 5px 4px; }
|
|
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
|
|
border-top: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
background-image: -webkit-linear-gradient(top, #ffffff 0%, #eee 50%);
|
|
background-image: -o-linear-gradient(top, #ffffff 0%, #eee 50%);
|
|
background-image: linear-gradient(to bottom, #ffffff 0%, #eee 50%);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
|
|
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
|
|
background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
|
|
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
|
|
.select2-container--classic .select2-selection--multiple {
|
|
background-color: white;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
cursor: text;
|
|
outline: 0; }
|
|
.select2-container--classic .select2-selection--multiple:focus {
|
|
border: 1px solid #5897fb; }
|
|
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 5px; }
|
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
|
|
background-color: #e4e4e4;
|
|
border: 1px solid #aaa;
|
|
border-radius: 4px;
|
|
cursor: default;
|
|
float: left;
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
padding: 0 5px; }
|
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
|
|
color: #888;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-right: 2px; }
|
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
|
|
color: #555; }
|
|
.select2-container--classic.select2-container--open .select2-selection--multiple {
|
|
border: 1px solid #5897fb; }
|
|
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
|
|
border-top: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0; }
|
|
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.select2-container--classic .select2-search--dropdown .select2-search__field {
|
|
border: 1px solid #aaa;
|
|
outline: 0; }
|
|
.select2-container--classic .select2-search--inline .select2-search__field {
|
|
outline: 0; }
|
|
.select2-container--classic .select2-dropdown {
|
|
background-color: white;
|
|
border: 1px solid transparent; }
|
|
.select2-container--classic .select2-dropdown--above {
|
|
border-bottom: none; }
|
|
.select2-container--classic .select2-dropdown--below {
|
|
border-top: none; }
|
|
.select2-container--classic .select2-results > .select2-results__options {
|
|
max-height: 200px;
|
|
overflow-y: auto; }
|
|
.select2-container--classic .select2-results__option[role=group] {
|
|
padding: 0; }
|
|
.select2-container--classic .select2-results__option[aria-disabled=true] {
|
|
color: grey; }
|
|
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
|
|
background-color: #3875d7;
|
|
color: white; }
|
|
.select2-container--classic .select2-results__group {
|
|
cursor: default;
|
|
display: block;
|
|
padding: 6px; }
|
|
.select2-container--classic.select2-container--open .select2-dropdown {
|
|
border-color: #5897fb; }
|