在非活动标签容器中选择宽度问题答案

【问题标题】：chosen width issue inside inactive tab container在非活动标签容器中选择宽度问题
【发布时间】：2015-02-26 07:00:12
【问题描述】：

我正在使用 Chosen 库来启用对下拉控件的轻松过滤，我现在面临一个问题。我正在使用引导选项卡控件来排列表单中的项目，如果我将下拉菜单放在选择下拉列表的非活动选项卡项目宽度为 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!" });

这是我使用所选库的方式

【问题讨论】：

在tab shown上尝试update chosen

标签： javascript jquery twitter-bootstrap jquery-chosen

【解决方案1】：

这是因为宽度是在下拉菜单可见之前由 Chosen 计算出来的。

至少有两种解决方法：

CSS 解决方法：

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

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

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

【讨论】：

【解决方案2】：

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

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

这也适用于内容被编译但不可见 (width=0) 的模式窗口。

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

【讨论】：

【解决方案3】：

当我们设置TabContainer的“AutoPostBack=True”时出现Tabcontainer的问题，然后它解决了更改tabpanel后缩小下拉宽度的问题。如果可行请标记

【讨论】：