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

Answer 2

I had a responsive form, which had lot of CSS rules with media queries, !important, etc and was using chosen with class inheritance option. On resizing, there were often conflicts between chosen and parent css and things would break. I came up with a simple solution that worked for me: recreate chosen dom on every window resize:

jQuery(document).ready(function() {
        doResize();
        jQuery(window).on('resize', doResize);
});


function doResize() {
     // Parent website's code, that would also reorganize select elements on the page
    jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen
    jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen

    jQuery(".chzn-container").remove();
    jQuery("select.my-select").chosen({
                 width: '100%',
                 disable_search_threshold: 10,
                 inherit_select_classes : true
               });
}

Answer 3

Building on @MSánchez's answer, I wrote the following to be more generic without referring to any IDs:

function processChosenContainer(myme) {
    myme.innerWidth(myme.parent().innerWidth() - 30);
}

function processChosenSearch(myme) {
    myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13);
}

function processChosenDrop(myme) {
    myme.innerWidth(myme.parent().parent().innerWidth() - 32);
}

window.addEventListener("resize", function () {
    //******Adjust Container Width********/
    var myObj = $('.chosen-container');
    myObj.each(function () {
        processChosenContainer($(this));
    });
    //******Adjust input search Width********/
    var myObj2 = $('.chosen-search input');
    myObj2.each(function () {
        processChosenSearch($(this));
    });
    //******Adjust drop Width********/
    var myObj3 = $('.chosen-drop');
    myObj3.each(function () {
        processChosenDrop($(this));
    });
}, false);

Also add to the select element "chosen-select-responsive" which is as follows:

.chosen-select-responsive {
width: 100% !important;
}

Again, this is only a build-up on MSánchez's answer! thnx

Answer 4

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.

Answer 5

Here is the simple why I did it.

JS:

// Create Chosen Select Menus
setUpSelectMenus();

// Reset Chosen Select Menus when window changes size
window.addEventListener( "resize", function() { setUpSelectMenus(); } );

/**
 * Settings for Default Chosen Select Menus
 */
function setUpSelectMenus(){

    $( '.chosen-select' )
        .chosen( "destroy" ) // Need this to make responsive
        .chosen(
            {
                allow_single_deselect   : true,
                disable_search_threshold: 10
            }
        );
}

Answer 6

This blog recommends the following:

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