Mvc Dropdownlist Select picker not showing

I am quite sure it may be some script reference i need, but heres what i have so far.

My Scripts:

    script src="~/scripts/jquery-3.1.1.js"></script>


<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/bootstrap-select.min.js"></script>
<script type="text/javascript">


    $(document).ready(function () {
        $(".selectpicker").selectpicker({
            liveSearch: true,
            showSubtext: true
        });
    });
</script>

using Knockout after this to load in objects.

My Css:

<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">

and the normal Bootstrap.

here is my dropdown:

 <td><u>persons</u><br />@Html.DropDownList("PersonId", (SelectList)ViewBag.PersonId, "Choose the person you want.", htmlAttributes: new
                           {
                               @class = "selectpicker",
                               data_show_subtext = "true",
                               data_live_search = "true"
                           })

if i inspect the page, i can find the select with the correct options, but not showing on page unless i remove the class "Selectpicker" any advice how to fix this?

Thanks.

Solution

You need to check on chrome developers tools what are the computed attributes for this element, you might find out that there is another implementation for this class that hides it.

to see the computed attributes:

Open developer tools on google chrome (f12 or inspect element on the desired element)
Select the element you want to check on the Elements Tab
From the right pane of the developer tools select the Computed Tab

there you will find the list of computed CSS attributes and if you click on any of the attributes it'll open the location of this implementation

hope that will help