MSánchez MSánchez - 1 month ago 18x
jQuery Question

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.


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:

    width: 100% !important;

Where *#form_paciente* is your selection ID.

After that add this script on your view:

window.addEventListener("resize", function() {
    $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12);
}, false);

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

That's all!