MVC 组件 SelectList 错误 - 在隐藏 div 内初始化时宽度错误答案

【问题标题】：MVC component SelectList bug - wrong width when initialized inside hidden divMVC 组件 SelectList 错误 - 在隐藏 div 内初始化时宽度错误
【发布时间】：2014-10-14 20:08:46
【问题描述】：

我在 SelectList 初始化时遇到了这个愚蠢的问题

在我看来，我正在初始化一个列表：

<div class="col-md-6">
    <label class="control-label">Offer type</label>
    @Html.DropDownListFor(m => m.Filter.OfferTypeList, 
        new SelectList(Model.OfferTypes, "IdOfferType", "Name"), 
        new { multiple = "multiple", size = "1", @class = "form-control multipleSelect" })
</div>

当列表初始化时，一切正常。 SelectList 的宽度是屏幕的一半。

我想使用一些折叠 - 这意味着，在页面初始化时，这个 div 被包裹在一个带有 style="display:none;" 的 div 中但这会导致 MVC 将 SelectList 的宽度设置为 100px；这不是故意的。您可以通过在隐藏的 div 中初始化一个 SelectList 来简单地模拟这一点，然后使用 FireBug 删除 display:none - 噗，太小了！

编辑：我忘了提，我们使用的是 bootstrap 3

感谢您的建议，也许解决方案很简单。

【问题讨论】：

标签： asp.net-mvc hidden selectlist

【解决方案1】：

如果您不直接设置，Asp.Net MVC 不会添加任何其他样式。所以问题在于 HTML 页面上选择元素的默认大小。请看这个example 我为select输入设置样式

select { width: 200px; }

因此页面上的所有select 元素默认宽度为 200px。要设置您选择的固定大小，您应该为multipleSelect 类设置样式。

【讨论】：

这是 MVC 生成的（我认为）div，宽度错误：
...嗯，但我刚刚发现，还有 jquery.multiple.select.js 篡改了这个...

【解决方案2】：

如果您使用的是 Bootstrap，请尝试调整 <div class = "col-md-6">

Bootstrap 将主 div 分为 12 个部分。

更多信息请点击链接：http://getbootstrap.com/examples/grid/

希望对你有帮助

【讨论】：

试过了，列的大小无关紧要。我没有发布整个代码，第一列也是col-md-6。但是谢谢你的建议。