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%; + } + } } }