Выпадающий список Select2 имеет смещение -5px влево относительно отображаемого значения select2.Не могу изменить с JQuery

Question

Я использую bootstrap, jquery ui, select2 и т. Д. На одной странице. Это привело к смещению -5px в раскрывающемся списке select2 влево относительно отображаемого значения (после выбора) select2.

.

Я попытался переместить выпадающий список вправо с помощью следующего кода:

   var select2_pos = $("html body span.select2-container.select2-container--default.select2-container--open").position();
   select2_pos.left = select2_pos.left + 5;
   $("html body span.select2-container.select2-container--default.select2-container--open").position(select2_pos);

Но это дает мне ошибку:

TypeError: select2_pos is null

Кто-нибудь знает, как мне это сделать?

Answer 1

Неправильная позиция раскрывающегося списка возникает при первом щелчке по раскрывающемуся списку и при первом щелчке по раскрывающемуся списку после поиска, который не дал результатов.

Вот обходной путь , который, кажется, работает для многих людей (включая меня). Моя реализация ниже:

<select class="form-control" data-use-select2="true" name="assessment[assigned_to_id]" id="assessment_assigned_to_id">
<option value="">Select User...</option>
<option value="12">org0user0@test.com</option>
<option value="11">org0user1@test.com</option>
</select>
<select class="form-control" data-use-select2="true" name="assessment[approver_id]" id="assessment_approver_id" >
<option value="">Select User...</option>
<option value="12">org0user0@test.com</option>
<option value="11">org0user1@test.com</option>
</select>

    // data-select2 conflicts with library code. data-something-select2 works
    // set the dropdownParent to fix positioning error
    // https://github.com/select2/select2-bootstrap-theme/issues/41#issuecomment-310825598
    $("select[data-use-select2]").each(function() {
        $(this).select2({
            theme: "bootstrap4",
            dropdownParent: $(this).parent()
        });
    });