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

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!