dropdown list show two dropdown list when using selectpicker

Question

i am using selectpicker the dropdown shows twice like in the image

when i remove selectpicker class it show nomal dropdown list

<div class="row">
    <div class="col-sm-12">
        <div class="card-box">
            <h4 class="m-t-0 header-title"><b>Select app</b></h4>
            <div class="row">
                <div class="col-md-4">
                    <div class="p-20">
                        <select class="selectpicker" data-style="btn-white">
                            <option>abc</option>
                            <option>xyz</option>
                            <option>123</option>
                        </select> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

$('.selectpicker').selectpicker();
    $(":file").filestyle({input: false});
});

Answer 1

Make sure "bootstrap-select.css" is loaded correctly.

It has .bootstrap-select > select style that is applied to style element which will hide the normal dropdown list.

Inspect the select and take a look above style is applied there? I have used above code and it is working fine when "bootstrap-select.css" is loaded.

Answer 2

In my case, I was mistakenly loading CSS file under a condition, just moved CSS file out of condition and made it global.

So, yes please check if bootstrap-select CSS is loading or not.