Chosen harvesthq resize width dynamically

问题

How can you have a harvesthq Chosen dropdown with a dynamic width style?

By default it has a fixed width and if you try to modify it with CSS you will have several problems to reach a good result.

回答1:

This blog recommends the following:

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

回答2:

this one worked for me, even with multiple select boxes on the screen:

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

Year 2019. edit: Bear in mind that this answer was made 4 years ago when jQuery was popular library and when it was widely used. My advice is to use pure JS for everything made after this year. Don't neg rep historical answers that worked at the time they were written.

回答3:

I just want to share my solution about how to resize chosen dropdown width on screen resize:

Firstly you have to add this style on your css:

#form_paciente{
    width: 100% !important;
}

Where *#form_paciente* is your selection ID.

After that add this script on your view:

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

In that case *#selecciona_paciente_estadisticas_form* is the form parent ID of *#form_paciente*

That's all!

回答4:

Although partly mentioned above, I would like to point out the following solution:

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

This way your chosen widget will always be 100%, and resize accordingly. If you need it to be some other width, change the percentage or encapsulate the select itself with another element, and set the width on that element instead.

回答5:

I had a responsive form, which had lot of CSS rules with media queries, !important, etc and was using chosen with class inheritance option. On resizing, there were often conflicts between chosen and parent css and things would break. I came up with a simple solution that worked for me: recreate chosen dom on every window resize:

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

回答6:

Building on @MSánchez's answer, I wrote the following to be more generic without referring to any IDs:

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

Also add to the select element "chosen-select-responsive" which is as follows:

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

Again, this is only a build-up on MSánchez's answer! thnx

回答7:

Just use width in percentage within single quotes:

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

A responsive chosen using this technique can be seen here: http://plnkr.co/edit/RMAe8c?p=preview

回答8:

Here is the simple why I did it.

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

回答9:

The way I use is to use 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%;
}

回答10:

For me, what it really worked was this:

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

and inside document.ready

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

where dropdown is id of the dropdown. You can also set width decrease on change event. #dropdown_chosen is created by chosen as follows:

dropdown - your dropdown id append _chosen

来源：https://stackoverflow.com/questions/16960690/chosen-harvesthq-resize-width-dynamically