Select2 适用于宽度较小的@Html.DropDownList Jquery UI 对话框？答案

【问题标题】：Select2 apply on @Html.DropDownList Jquery UI dialogue having small width?Select2 适用于宽度较小的@Html.DropDownList Jquery UI 对话框？
【发布时间】：2021-02-16 22:02:11
【问题描述】：

我在 MVC# 中工作，我有一个 div，我使用 jQuery 作为对话框打开，如下所示：

<div id="dialog">
    <form action="" method="post" dir="ltr">
        <div>
            @Html.DropDownList("LKP_Managers", null, " ", htmlAttributes: new { @class = "form-control " })
        </div>
    </form>
</div>

默认情况下，对话框将autoOpen 设置为false：

$("#dialog").dialog({
    autoOpen: false
});

function OnEdit(link) {
    $("#dialog").dialog("open");
}

点击后可见：

<input type="button" id="model.NationalID" class="btn btn-info"  onclick="javascript:OnEdit(id);" />

但是，下拉菜单显示的宽度非常小，我看不到它的值。在此对话框之外，select2 在其他任何地方都可以正常工作。

我找到了一个 CSS 解决方案，但它适用于所有下拉菜单，而我只希望它适用于这个特定的下拉菜单：

.select2-container {
    width: 100% !important;
}

.select2-search--dropdown .select2-search__field {
    width: 98%;
}

是否可以修改上述 CSS，使其仅在我的对话框下拉列表 LKP_Managers 上实现？

【问题讨论】：

你好@user802782，我的回答对你有用吗？

标签： jquery css asp.net-mvc jquery-select2 jquery-ui-dialog

【解决方案1】：

您可以将自定义类添加到下拉列表中，然后修改您的 CSS 以仅对该类进行操作。这会将一个名为 lkp-managers 的类添加到您的 <select> 元素中：

@Html.DropDownList(
  "LKP_Managers",
  null,
  " ",
  htmlAttributes: new { @class = "form-control lkp-managers" }
)

然后您可以将 CSS 应用到该类：

.select2-container.lkp-managers {
    width: 100% !important;
}

然后，您的 select2 定义需要将 container width 设置为 resolve，以便根据 <select> 元素的 style 属性确定宽度：

$('.your-select2-definition').select2({
  /* ... */
  width: 'resolve', 
})

另一种选择是简单地在您的 select2 实例本身上设置主题，然后您可以修改搜索字段宽度以及容器：

$('.your-select2-definition').select2({
  /* ... */
  theme: 'lkp-managers', 
})

你的风格是

.select2-container--lkp-managers {
    width: 100% !important;
}

.lkp-managers .select2-search--dropdown .select2-search__field {
    width: 98% !important;
}

【讨论】：