Select2 Placeholder Issue

Question

I have a Select2 Multiselect html element. While rendering the placeholder is not displaying, but if I select and remove the item, the placeholder is displaying. I have no idea how to make it work. Please advise.

Initially

While Selection

After removing the items

Code:

@Html.DropDownListFor(m => m.Vendor, new SelectList(Model.Status), "Search Status", new { @id = "advanced-search-lsc-status", @class = "form-control", @multiple = "multiple", data_placeholder = "Select Status" })


$('#advanced-search-status').select2({
            minimumResultsForSearch: -1,
            placeholder: function(){
                $(this).data('placeholder');
            },
            width: '100%'
        });

Answer 1

Just now found out that what was wrong, initially the width was set to 0 which hides the placeholder.

Just manipulated using this jquery code.

.select2-container--default .select2-search--inline .select2-search__field{
    width:initial!important;
}

now it works

Thanks guys.