Harvesthq choisi redimensionner la largeur dynamicment

Ce blog recommande ce qui suit:

$("select").chosen({ width: '100%' }); // width in px, %, em, etc 

celui-ci a fonctionné pour moi, même avec plusieurs cases de sélection à l’écran:

 $(document).ready(function(){ resizeChosen(); jQuery(window).on('resize', resizeChosen); }); function resizeChosen() { $(".chosen-container").each(function() { $(this).attr('style', 'width: 100%'); }); } 

Je veux juste partager ma solution sur la façon de redimensionner la largeur de la liste déroulante choisie à l’écran:

Tout d’abord, vous devez append ce style sur votre css:

 #form_paciente{ width: 100% !important; } 

Où * # form_paciente * est votre identifiant de sélection.

Après cela, ajoutez ce script sur votre vue:

 window.addEventListener("resize", function() { $('.chzn-container').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()); $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12); $('.chzn-drop').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-2); }, false); 

Dans ce cas, * # selecciona_paciente_estadisticas_form * est l’ID parent du formulaire de * # form_paciente *.

C’est tout!

J’avais un formulaire responsive, qui contenait beaucoup de règles CSS avec les requêtes de médias,! !important , etc. et que j’utilisais avec l’option d’inheritance de classe choisie. Lors du redimensionnement, il y avait souvent des conflits entre les CSS choisis et les CSS qui allaient casser Je suis arrivé avec une solution simple qui a fonctionné pour moi: recréer le dom choisi sur chaque fenêtre redimensionnée:

 jQuery(document).ready(function() { doResize(); jQuery(window).on('resize', doResize); }); function doResize() { // Parent website's code, that would also reorganize select elements on the page jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen jQuery(".chzn-container").remove(); jQuery("select.my-select").chosen({ width: '100%', disable_search_threshold: 10, inherit_select_classes : true }); } 

S’appuyant sur la réponse de @ MSánchez, j’ai écrit ce qui suit pour être plus générique sans faire référence à aucun ID:

 function processChosenContainer(myme) { myme.innerWidth(myme.parent().innerWidth() - 30); } function processChosenSearch(myme) { myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13); } function processChosenDrop(myme) { myme.innerWidth(myme.parent().parent().innerWidth() - 32); } window.addEventListener("resize", function () { //******Adjust Container Width********/ var myObj = $('.chosen-container'); myObj.each(function () { processChosenContainer($(this)); }); //******Adjust input search Width********/ var myObj2 = $('.chosen-search input'); myObj2.each(function () { processChosenSearch($(this)); }); //******Adjust drop Width********/ var myObj3 = $('.chosen-drop'); myObj3.each(function () { processChosenDrop($(this)); }); }, false); 

Ajoutez également à l’élément select “selected-select-responsive” qui se présente comme suit:

 .chosen-select-responsive { width: 100% !important; } 

Encore une fois, ceci n’est qu’une accumulation de la réponse de MSánchez! thnx

Bien que partiellement mentionné ci-dessus, je voudrais souligner la solution suivante:

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

De cette façon, votre widget choisi sera toujours à 100% et sera redimensionné en conséquence. Si vous souhaitez utiliser une autre largeur, modifiez le pourcentage ou encapsulez la sélection elle-même avec un autre élément, puis définissez la largeur de cet élément.

Utilisez simplement la largeur en pourcentage entre guillemets simples:

Un responsive choisi en utilisant cette technique peut être vu ici: http://plnkr.co/edit/RMAe8c?p=preview

Voici le simple pourquoi je l’ai fait.

JS:

 // Create Chosen Select Menus setUpSelectMenus(); // Reset Chosen Select Menus when window changes size window.addEventListener( "resize", function() { setUpSelectMenus(); } ); /** * Settings for Default Chosen Select Menus */ function setUpSelectMenus(){ $( '.chosen-select' ) .chosen( "destroy" ) // Need this to make responsive .chosen( { allow_single_deselect : true, disable_search_threshold: 10 } ); } 

La façon dont j’utilise est d’utiliser inherit_select_class.

HTML

JS

 jQuery("[data-chosen]").chosen({ inherit_select_classes : true }); 

CSS

 .input-xxlarge { width:530px; max-width: 100%; } 

Pour moi, cela a vraiment fonctionné:

 function resizeChosen() { var chosen = $("#dropdown_chosen"); var max = chosen.parent().width(); var currentWidth = chosen.width(); var now = currentWidth + 20 / 100 * currentWidth; if (now <= max) { $("#dropdown_chosen").attr('style', "width: " + now + "px"); } } 

et à l'intérieur du document.ready

 dropdown.chosen().change(function() { resizeChosen(); }); 

où la liste déroulante est l'id de la liste déroulante. Vous pouvez également définir une diminution de la largeur en cas d'événement de changement. #dropdown_chosen est créé par choisi comme suit:

dropdown - votre identifiant de menu déroulant append _chosen