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

For me, what it really worked was this:

function resizeChosen() {
    var chosen = $("#dropdown_chosen");
    var max = chosen.parent().width();
    var currentWidth = chosen.width();
    var now = currentWidth + 20 / 100 * currentWidth;

    if (now <= max) {
        $("#dropdown_chosen").attr('style', "width: " + now + "px");
    }
}

and inside document.ready

dropdown.chosen().change(function() {
    resizeChosen();
});

where dropdown is id of the dropdown. You can also set width decrease on change event. #dropdown_chosen is created by chosen as follows:

dropdown - your dropdown id append _chosen