chosen width issue inside inactive tab container

Question

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

Answer 1

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 */
    });