Question

我正在使用选择的库来启用下拉控件的轻松过滤，我现在面临一个问题。我正在使用引导选项卡控件来排列表单中的项目，如果我将Dropdown放在非活动选项卡项目中，选择下拉列表的宽度为0（完全不可见）。

我该如何解决这个问题？

@Html.DropDownListFor(model => model.OriginalItem.AuthorId, (SelectList)ViewBag.LicensorList, "Select", new { @class = "chosen-single chosen-default" })
 $('#OriginalItem_AuthorId').chosen({ no_results_text: "Oops, nothing found!" });

这是我使用所选库的方式

Answer 1

这是因为宽度是在下拉列表可见之前按Chosen计算的。

至少有两种解决方法：

CSS解决方法：

.chosen-container { 
    width: 100% !important; /* desired width */
}

JS解决方法 （在选择初始化时） ：

$(".chosen-select").chosen(
    { 
        width: '100%' /* desired width */
    });

Answer 2

只需在单引号内使用百分比宽度：

<select chosen width="'100%'" ... ></select>

这也适用于模态窗口，其中内容编译时不可见（width = 0）。

使用此技术选择的响应可以在这里看到：http://plnkr.co/edit/RMAe8c?p=preview

Answer 3

当我们设置TabContainer的“ AutoPostBack = True”时，存在Tabcontainer的问题，它消除了更改Tabpanel后缩小下拉宽度的问题。请标记它是否可行

在非活动选项卡容器中选择宽度问题

3 个答案: