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 p

Answer 1

I fixed with this quick sniplet

	$(window).resize(function() {
		$(".chosen-select").chosen('destroy') ;
		$(".chosen-select").chosen() ;
	});

Granted there are more elegant ways to handle it. But it works.

Answer 2

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

Answer 3

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

Answer 4

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 5

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.

Answer 6

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!