Chosen harvesthq resize width dynamically

Question

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.

Answer 1

This blog recommends the following:

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

Answer 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.

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

Answer 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.

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

Answer 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

Answer 7

I am doing an app in MVC5.

Here is what I have done:

In the .chosen-container class i added

width: 100% !important; // Assume that it is already 100% max-width: 280px; // It is the max-width of bootsrap form-control-class min-width: 0px; // It can go to 0


It can go from 0 and 280px and I assume that the width is 100%.

This worked out completly responsive for me.