How to change position of select2-dropdown at top after every time open in select2?

  css, html, javascript, jquery, select

Here i try to customization in select2 for my design requirement. But almost it’s done but only one problem that i am facing.

When i first click that select2 dropdown is open on correct place. As show as below image.

enter image description here

But when i select two or more option and reopen select2 than it’s dropdown position is changed and it come after all value before opening. As show as below image.

enter image description here

Dropdown position is look to very awkward after few selected option.

So is there any solution to open a select2 dropdown at top every time?

        jQuery(".js-select2").select2({
            closeOnSelect : false,
            placeholder : "Placeholder",
            allowHtml: true,
            allowClear: true,
            tags: true
        });

         jQuery('.js-select2').on("select2:unselect", function(e) {
            if (!e.params.originalEvent) {
              return
            }
            e.params.originalEvent.stopPropagation();
          });

         jQuery('select').select2().on('select2:open', function() {
          var container = jQuery('.select2-container').last();
        });
* {
    box-sizing: border-box;
}

.select2-container {
    min-width: 400px;
}

.select2-results__option {
    padding-right: 20px;
    vertical-align: middle;
}

.select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 20px;
    vertical-align: middle;
}

.select2-results__option[aria-selected=true]:before {
    font-family: fontAwesome;
    content: "f00c";
    color: #fff;
    background-color: #f77750;
    border: 0;
    display: inline-block;
    padding-left: 3px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eaeaeb;
    color: #272727;
}

.select2-container--default .select2-selection--multiple {
    margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {

    /* border-color: #f77750; */

    /* border-width: 2px; */
}

.select2-container--default .select2-selection--multiple {
    border-width: 2px;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
    display: none;
}

.select-icon .placeholder {
    display: none;
}

.select-icon .select2-results__option:before, .select-icon .select2-results__option[aria-selected=true]:before {
    display: none !important;           /* content: "" !important; */
}

.select-icon  .select2-search--dropdown {
    display: none;
}

.select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 10px;
    vertical-align: middle;
    line-height: 20px;
}

.selection .select2-selection__rendered .select2-selection__choice {
    background: #FFFFFF;
    box-shadow: 2px 3px 0px rgb(0 0 0 / 25%);
    border-radius: 30px;
    border: none;
    color: #E0007A;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
    vertical-align: middle;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    position: relative;
    border: 1px solid #eeeeee;
    width: 100%;
}

.candidates-update-profile .selection .select2-selection__rendered .select2-selection__choice {
    color: #004A9C;
}

.select2-container--default ul.select2-selection__rendered .select2-selection__clear+li {
    margin-top: 50px;
}

.select2-selection__rendered .select2-selection__choice:first-child {
    margin-top: 50px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-image: url(https://i.stack.imgur.com/oRY9i.png);
    background-size: contain;
    height: 15px;
    width: 15px;
    background-repeat: no-repeat;
    margin-right: 15px;
    right: 0;
    position: absolute;
    font-size: 0;
}

.select2-results__option[aria-selected=true]:before {
    font-family: fontAwesome;
    content: "f00c";
    color: #fff;
    background-color: #000000;
    border: 0;
    display: inline-block;
    padding-left: 2px;
}

.noMultiSelect .select2-results__option:before {
    content: none;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: transparent;
    color: #272727;
}

.select2-container--default .select2-selection--multiple {
    background-color: #ffffff;
    cursor: text;
    box-shadow: 2px 3px 0px rgb(0 0 0 / 25%);
    border-radius: 30px;
    color: #707070;
    height: 40px;
}

.select2-container .select2-search--inline {
    opacity: 0;
}

.select2-selection--multiple:after {
    content: "";
    background-image: url(https://i.stack.imgur.com/c9rcb.png);
    background-repeat: no-repeat;
    cursor: pointer;
    height: 25px;
    width: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    overflow: visible;
    padding: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 30px;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 6px;
    box-shadow: 0 0 6px rgb(0 0 0 / 5%);
    border: none;
}

.select2-results__option {
    padding: 2px 10px;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 6px;
    box-shadow: 0 0 6px rgb(0 0 0 / 5%);
    border: none;
}

li.select2-search.select2-search--inline {
    display: none;
}

.custom-multi-select .select2-container--default .select2-selection--multiple {
    height: initial;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.custom-multi-select .select2-container--default .select2-selection--multiple {
    position: relative;
}

.custom-multi-select .select2-container--default .select2-selection--multiple:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    cursor: text;
    box-shadow: 2px 3px 0px rgb(0 0 0 / 25%);
    height: 40px;
    border-radius: 30px;
    border: 1px solid #eeeeee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<h4>Multi select checkbox</h4>
            
            <div class="custom-multi-select" style="margin-bottom: 10px;">
                <select class="js-select2" multiple="multiple">
                    <option value="01" data-badge="">Option1</option>
                    <option value="02" data-badge="">Option2</option>
                    <option value="03" data-badge="">Option3</option>
                    <option value="04" data-badge="">Option4</option>
                    <option value="05" data-badge="">Option5</option>
                    <option value="06" data-badge="">Option6</option>
                    <option value="07" data-badge="">Option7</option>
                    <option value="08" data-badge="">Option8</option>
                    <option value="09" data-badge="">Option9</option>
                    <option value="010" data-badge="">Option10</option>
                    <option value="011" data-badge="">Option11</option>
                    <option value="012" data-badge="">Option12</option>
                    <option value="013" data-badge="">Option13</option>
                </select>       
            </div>

            <div class="custom-multi-select" style="margin-bottom: 10px;">
                <select class="js-select2" multiple="multiple">
                    <option value="01" data-badge="">Option1</option>
                    <option value="02" data-badge="">Option2</option>
                    <option value="03" data-badge="">Option3</option>
                    <option value="04" data-badge="">Option4</option>
                    <option value="05" data-badge="">Option5</option>
                    <option value="06" data-badge="">Option6</option>
                    <option value="07" data-badge="">Option7</option>
                    <option value="08" data-badge="">Option8</option>
                    <option value="09" data-badge="">Option9</option>
                    <option value="010" data-badge="">Option10</option>
                    <option value="011" data-badge="">Option11</option>
                    <option value="012" data-badge="">Option12</option>
                    <option value="013" data-badge="">Option13</option>
                </select>       
            </div>

Source: Ask Javascript Questions

LEAVE A COMMENT