diff --git a/app/assets/javascripts/select2_customization.js b/app/assets/javascripts/select2_customization.js
index f689aa6e5..60c7cd622 100644
--- a/app/assets/javascripts/select2_customization.js
+++ b/app/assets/javascripts/select2_customization.js
@@ -24,6 +24,10 @@ $.fn.extend({
select2.next().find('.select2-selection .select2-selection__rendered').css('width', '100%');
}
+ // Create arrow
+ $('
').appendTo(select2.next())
+ .click(() => select2.next().find('.select2-selection').click());
+
// select all check
this[0].dataset.singleDisplay = config.singleDisplay || false;
if (this[0].dataset.selectAll === 'true') {
@@ -39,7 +43,7 @@ $.fn.extend({
var selectElement = this;
var groups;
var groupChildrens;
- $('.select2-dropdown').removeClass('custom-group')
+ $('.select2-dropdown').removeClass('custom-group');
$('.select2-selection').scrollTo(0);
$('.select2_select_all').remove();
// Adding select_all_button
@@ -57,10 +61,13 @@ $.fn.extend({
if (selectElement.dataset.dropdownPosition === 'left') {
$('.select2-dropdown').parent().addClass('left-position');
+ if (selectElement.dataset.selectAllButton === undefined) {
+ $('.select2-dropdown').parent().addClass('full');
+ }
}
// Adding select all group members event
if (selectElement.dataset.selectByGroup === 'true') {
- $('.select2-dropdown').addClass('custom-group')
+ $('.select2-dropdown').addClass('custom-group');
setTimeout(() => {
groups = $('.select2-dropdown').find('.select2-results__group');
groups.click(e => {
diff --git a/app/assets/stylesheets/select2_customizations.scss b/app/assets/stylesheets/select2_customizations.scss
index 3e08aec87..4251b7c40 100644
--- a/app/assets/stylesheets/select2_customizations.scss
+++ b/app/assets/stylesheets/select2_customizations.scss
@@ -13,7 +13,7 @@
}
.select2-selection__rendered {
- width: 200%;
+ width: calc(100% - 26px)
}
.select2-selection__choice {
@@ -28,6 +28,30 @@
}
}
+ .select2-arrow {
+ align-items: center;
+ background: $color-white;
+ border: 1px solid $color-alto;
+ border-radius: 0px 4px 4px 0px;
+ cursor: pointer;
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ top :0;
+ width: 26px;
+
+ &:hover {
+ background: $color-gainsboro;
+ border: 1px solid $color-silver-chalice;
+ }
+
+ .caret {
+ margin: 0;
+ }
+ }
+
.select2-dropdown {
border: 1px solid $color-alto;
z-index: 1000;
@@ -139,6 +163,7 @@
.select2-container--open.left-position {
left: calc(75% - 280px) !important;
top: 60px !important;
+ position: fixed !important;
.select2-dropdown {
border-radius: 0px;
@@ -153,5 +178,12 @@
max-height: 100%;
}
}
+
+ &.full {
+
+ .select2-results {
+ height: 100%;
+ }
+ }
}
}