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

Posted 2023-05-08

【中文标题】Select2 适用于宽度较小的@Html.DropDownList Jquery UI 对话框？

【英文标题】：Select2 apply on @Html.DropDownList Jquery UI dialogue having small width?

【发布时间】：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，我的回答对你有用吗？

【参考方案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;