web-dev-qa-db-fra.com

Harvesthq choisi redimensionner la largeur dynamiquement

Comment pouvez-vous avoir un menu déroulant harvesthq Choisi avec un style de largeur dynamique?

Par défaut, il a une largeur fixe et si vous essayez de le modifier avec CSS, vous aurez plusieurs problèmes pour obtenir un bon résultat.

jquerydrop-down-menuwidthjquery-chosen
15
MSánchez

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 ajouter 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!

6
MSánchez

Ce blog recommande ce qui suit:

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

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%');
   });          
}

Année 2019. edit: Gardez à l'esprit que cette réponse a été faite il y a 4 ans, lorsque jQuery était une bibliothèque populaire et qu'elle était largement utilisée. Mon conseil est d'utiliser du JS pur pour tout ce qui est fait après cette année. Ne repoussez pas les réponses historiques qui ont fonctionné au moment où elles ont été écrites. 

17
Vladimir Jovanović

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 avez besoin d'une largeur différente, 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.

2
Tormod Haugene

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

1
Reem

J'avais un formulaire responsive, qui contenait beaucoup de règles CSS avec des requêtes multimédia, !important, etc. et que j'utilisais avec l'option choisie avec héritage de classe. Lors du redimensionnement, il y avait souvent des conflits entre les fichiers CSS choisis et parents et des problèmes se produisaient. 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
               });
}
1
workwise

Utilisez simplement la largeur en pourcentage entre guillemets simples:

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

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

0
Bernardo Ramos

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

HTML

<select class="input-xxlarge" />

JS

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

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}
0
M Kaweepatt Churcharoen

Voici le pourquoi simple 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
            }
        );
}
0
Braeden