Chosen harvesthq resize width dynamically

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.

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!

This blog recommends the following:

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

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.