Select2 下拉列表相对于 select2 的显示值向左偏移 -5px。不能用jquery改变答案

【问题标题】：Select2 drop down list has -5px offset left relative to display value of select2. Can't change with jquerySelect2 下拉列表相对于 select2 的显示值向左偏移 -5px。不能用jquery改变
【发布时间】：2019-04-16 18:24:05
【问题描述】：

我在一页中使用bootstrap、jquery ui、select2 等。这导致select2 下拉列表相对于select2 的显示值（选择后）向左偏移了-5px。

我尝试使用以下代码将下拉列表向右移动：

   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

有谁知道我如何做到这一点？

【问题讨论】：

你使用过 $(document).ready() 吗？看起来 jQuery lib 没有加载
我做到了。它已加载。这是一个旧版本 (1.7.1) 虽然由于它带有 OpenJSGrid2.1.7。
好的第一件事：您不能使用 .position() 设置新的“左”位置。根据api.jquery.com/position，这个函数只能获取元素的位置。如果是相对定位，您可以使用 $(elemen).css("left", select2_pos.left + "px") （或 ".css("margin-left", ...) 之类的东西。
谢谢，但它在select2_pos.left = select2_pos.left + 5; 上抛出错误
看起来jquery position 不适用于隐藏元素，我假设下拉列表最初会被隐藏。不确定是否有其他方法可以获取位置或在显示位置时如何设置。

标签： jquery jquery-select2

【解决方案1】：

在您第一次单击下拉菜单时以及在没有结果的搜索后第一次单击下拉菜单时，会出现下拉菜单的错误位置。

Here is a workaround 这似乎适用于很多人（包括我）。我的实现如下：

<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()
        });
    });

【讨论】：