非活动选项卡容器内的选定宽度问题

chosen width issue inside inactive tab container

本文关键字：问题 选项 非活动      更新时间：2024-06-03

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

这就是我使用所选库的方式

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

至少有两种解决方法：

CSS解决方法：

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

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

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

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

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

这也适用于模式窗口，在该窗口中，内容是在不可见的情况下编译的（宽度=0）。

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

当我们设置"AutoPostBack＝True"；TabContainer，然后它解决了在更改tabpanel后缩小下拉宽度的问题。请标记它是否可行

相关文章：