Selected Width Problem Inside Inactive Tabbed Container

Question

I use the Chosen library to enable easy filtering in the dropdown menu, and now I am facing one problem. I use the bootstrap control to arrange the elements in the form, and if I put a drop-down list inside the inactive width of the tab element, then the "Select" dropdown menu 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!" });

So I use the selected library

Answer 1

This is due to the fact that the width is calculated by the selected value before the drop-down menu is visible.

There are at least two ways:

CSS:

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

---

JS ( ) :

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

Answer 2

:

<select chosen width="'100%'" ... ></select>

, (width = 0).

, , : http://plnkr.co/edit/RMAe8c?p=preview