Select2 is not showing dropdown, clear, or any other images

Question

I think I am missing something here.

Select2 is working fine in my MVC application, except, it is not showing dropdown image, search image, clear image, or I should say any other image which is a part of this plugin.

Following is how I have used it in my page:

1) Razor view

<div>
<input id="countriesList" type="hidden" class="bigdrop"/>
</div>

2) Script

$('#countriesList').select2(
{
    placeholder: 'Select Countries',
    minimumInputLength: 0,
    maximumSelectionSize: 3,
    multiple: true,
    allowClear:true,
    ajax: {
        url: '@Url.Action("GetCountriesList", "Geography")',
        dataType: 'json',
        data: function (term, page) {
            return {
                searchTerm: term
            };
        },
        results: function (data, page) {
        return {
            results: data 
            };
        }
    }
});

Also, I have copied select2 files (i.e. js, css, images, and all) in the same folder structure as they were downloaded from its site, and I can see CSS and JS being loaded as well. It seems I am not using appropriate classes due to which images are not getting loaded.

score 2 · Accepted Answer · answered May 06 '13 at 04:40

2

I worked it out myself. While bundling used in an MVC application, the style bundles must have names similar to physical folder containing CSS.

answered May 06 '13 at 04:40

Nirman

6,715
19
72
139

I'm getting the same problem. How exactly did you fix it? – Filipe Leite Sep 24 '14 at 08:20
For example, your Select2 styles are under "../Contents/Select2/css" folder then your style bundle name should also contain similar path.. For example "~/Contents/Select2/Styles" Let me know if that doesn't solve the problem – Nirman Sep 29 '14 at 18:05

score 0 · Answer 2 · edited May 23 '17 at 12:17

i have same problem and i think @Nirman's answer is not good (for) me. because if the bundle and directory has same name. mvc has been confused and not loads css and other contents that placed in that directory.

look at the 2nd part of second answer of this post. it shows the conflict between same name of bundles and directories:

Do not use folder paths as bundle names

it says: "2. Do not use folder paths as bundle names"

Select2 is not showing dropdown, clear, or any other images

2 Answers2