chosen width issue inside inactive tab container

javascript, jquery, jquery-chosen, twitter-bootstrap

Solution

This is because the width is calculated by Chosen before the dropdown is visible.

There are at least two workarounds:

CSS workaround :

.chosen-container { 
    width: 100% !important; /* desired width */
}

JS workaround (on Chosen initialization) :

$(".chosen-select").chosen(
    { 
        width: '100%' /* desired width */
    });

Problem

I am using Chosen library to enable easy filtering on a dropdown control and i am facing one issue now. I am using bootstrap tab control to arrange the items in a form and if i place the Dropdown inside the inactive tab item width of Choosen dropdown is 0 (invisible at all ). How can i fix this? ``` @Html.DropDownListFor(model => model.OriginalItem.AuthorId, (SelectList)ViewBag.LicensorList, "Select", new { @class = "chosen-single chosen-default" }) $('#OriginalItem_AuthorId').chosen({ no_results_text: "Oops, nothing found!" }); ``` This is the way i am using chosen library

Original source