How to use Selected2 search bar in my ASP.NET Core MVC project?

Question

I'm new to Selected2 and ASP.NET Core, so any tips would be great. I'm currently working on a page for my application that's a form style. One of the fields is a multiple dropdown menu. I found that Selected2 could make some really cool multi pick search bars. I added the selected two drop down menu code:

    <label for="id_label_multiple">
        <select class="form-control" id="dropdown" multiple style="width: 75%">
            @*<option selected disabled="true"> Select Your Games</option>*@
            <option value="Game1"> Game1</option>
            <option value="Game2"> Game2</option>
            <option value="Game3"> Game3</option>
            <option value="Game4"> Game4</option>
            <option value="Game5"> Game5</option>
            <option value="Game6"> Game6</option>
        </select>
    </label>

with this javascript:

<script>
    $(document).ready(function () {
        $('#dropdown').select2({
            placeholder: "Next Game",
        });
    });

</script>

also had to add the following three lines to the top of my page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<link rel=  "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />

However, it didnt take the formatting of selected 2 css UNTILL I put: 'Layout = null;' at the top of my page along with my ViewData["Title"]. So what im understanding from this is that I need to override the main Layout for it to to actually use the Selected2 CSS and js? does anyone know how I can maintain my main layout and have that selected2 bar still look nice and function as expected?

Answer 1

However, it didnt take the formatting of selected 2 css UNTILL I put: 'Layout = null;' at the top of my page

That is because bootstrap.css conflict with your select2.css .So yes you need customize some css style.

For Bootstrap v4.3.1 ,you just need add the css like below:

<label for="id_label_multiple">
    <select class="form-control" id="dropdown" multiple style="width: 75%">
        @*<option selected disabled="true"> Select Your Games</option>*@
        <option value="Game1"> Game1</option>
        <option value="Game2"> Game2</option>
        <option value="Game3"> Game3</option>
        <option value="Game4"> Game4</option>
        <option value="Game5"> Game5</option>
        <option value="Game6"> Game6</option>
    </select>
</label>
@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
    <style>
        .select2-container {
            position: absolute;
        }  
        .select2-container--default .select2-search--inline .select2-search__field {
            width: initial !important;
        }
    </style>
    <script>
        $("#dropdown").select2({
            placeholder: "Next Game"
        });

    </script>
}