2 votes

Le plugin jQuery Chosen ne se stylise pas correctement. Très petit

J'ai déjà mis en œuvre Chosen, mais je rencontre un problème pour le faire fonctionner dans MVC 3. Je ne sais pas quelle en est la cause, mais l'élément est rendu très étroit et je ne sais pas pourquoi. J'ai cherché partout et je n'arrive pas à comprendre, j'ai l'impression de prendre des pilules de folie ! Merci !

Here is a screenshot

Voici mon code :

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();
    });

4voto

George Points 974

Remplacer

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

avec

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

2voto

thebdawk05 Points 55

J'ai déjà rencontré ce problème auparavant. C'est display: none;" C'est le style qui pose problème. Vous devez le supprimer de la division, car lorsque la page est rendue, le système choisi ignore les éléments qui ne sont pas affichés. Par conséquent, il ne produit pas ce qu'il devrait. Essayez de masquer cet élément après le chargement de la page.

0voto

Ehsan Points 155

Dans mon cas, j'ai supprimé display: inline-block; de .chosen-container dans le fichier .css choisi et a résolu le problème.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X