jQuery Chosen插件没有正确的样式。很小

Question

之前我已经实现了Chosen，但是我遇到了一个试图让它在MVC 3中运行的问题。我不知道是什么导致了这个，但是元素呈现的非常狭窄而且我没有想法为什么。我看了一遍，我无法弄明白，我觉得我正在服用疯狂的药丸！谢谢！

这是我的代码：

CSHTML：

div id="ProducerData" style="display: none;">
                <h2>
                    Winery Information</h2>

                @Html.DropDownListFor(m => m.Producer.ProducerID, new SelectList(Model.Producers, "ProducerID", "Name"), "Please select a producer")
                <input type="button" id="btnNewProdcue" value="New Producer?" onclick="NewProducer(); return false;" />
                <table id="ProducerDataTable">

JS：

$(document).ready(function () {

        SlideWidth = 650;
        SlideSpeed = 500;
        InitTab();


        $("#ProducerDataTable input[type=text]").addClass("DisabledTextInput");
        $("#ProducerDataTable input[type=text]").attr("disabled", true);

        $("#Producer_ProducerID").change(OnProducerChange);
        $("#UserTypes img").click(OnUserTypeClick);
        $("#UserObj_Country").change(OnCountryChange);
        $(".state").change(OnStateChange);
        SetNavigationDisplay();
        $("#UserObj_Phone").live("keypress", function (e) {
            if (e.which === 0) {
                e.preventDefault();
            }
        });

        $("#Producer_ProducerID").chosen();
    });

Answer 1

替换

$("#Producer_ProducerID").chosen();

带

var opts = {};
if (!$("#Producer_ProducerID").is(':visible')) {
     opts["width"] = 'auto';
}
$("#Producer_ProducerID").chosen(opts);

Answer 2

之前我遇到过这个问题。 display: none;"样式就是问题所在。您应该从div中删除它，因为在页面渲染时，选择忽略未显示的元素。因此它不会产生它应该产生的东西。在页面加载后尝试隐藏该元素。

Answer 3

就我而言，我在selected.css文件中从display: inline-block;删除了.chosen-container并解决了问题。