Select 2 incorrect render

[DanielJoseDolz]

Select 2 components rendering wrong

When using select2 according to instructions, it renders different than using adminlte vanilla

This is what it looks like:

This is the expected render (adminlte vanilla):

Thank you very much for all your hard work!

[dfsmania]

Please, share the code you have used to create the select2 component, and the plugin configuration you are using.

[DanielJoseDolz]

Thank you for your answer. Here goes:

    'Select2' => [
      'active' => true,
      'files' => [
        [
          'type' => 'js',
          'asset' => false,
          'location' => '//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js',
        ],
        [
          'type' => 'css',
          'asset' => false,
          'location' => '//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css',
        ],
      ],
    ],

Samples are copies from adminlte3

<select class="form-control select2" style="width: 100%;">
    <option selected="selected">Alabama</option>
    <option>Alaska</option>
    <option>California</option>
    <option>Delaware</option>
    <option>Tennessee</option>
    <option>Texas</option>
    <option>Washington</option>
</select>

$(function () {
      //Initialize Select2 Elements
      $('.select2').select2()
}

Is this what you need? Thank you very much!

[dfsmania]

I think you missed setup for Bootstrap4 (AdminLTE is based on Bootstrap4), try with next code:

Plugin Config:

'Select2' => [
    'active' => false,
    'files' => [
        [
            'type' => 'js',
            'asset' => false,
            'location' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js',
        ],
        [
            'type' => 'css',
            'asset' => false,
            'location' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css',
        ],
        [
            'type' => 'css',
            'asset' => false,
            'location' => 'https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css',
        ],
    ],
],

Plugin Markup and Initialization:

<select class="form-control select2" style="width: 100%;">
    <option selected="selected">Alabama</option>
    <option>Alaska</option>
    <option>California</option>
    <option>Delaware</option>
    <option>Tennessee</option>
    <option>Texas</option>
    <option>Washington</option>
</select>

$(document).ready(function() {
    //Initialize Select2 Elements
    $('.select2').select2({
        'theme': 'bootstrap4'
    })
})

However, you may try to use the built-in component for select2 instead.

[DanielJoseDolz]

This worked! Although for future people readijng this, you should change"

'active' => false, to 'active' => true,

I had tried the theme: bootstrap4 with no success.

Thank you very much! Although I'd like to ask what do you mean "However, you may try to use the built-in component for select2 instead."

Regrds,

[dfsmania]

Thank you very much! Although I'd like to ask what do you mean "However, you may try to use the built-in component for select2 instead."

This package comes with some blade components with AdminLTE style, and there is one around the Select2 plugin. You may try it instead of using directly the Select2 plugin. Read the linked documentation for more details:

• Package Blade Components
• Select2 Component

This worked! Although for future people readijng this, you should change"

'active' => false, to 'active' => true,

Yeah, active => true will include the plugin on all pages you extend from the layout, while I prefer to set it to false and include the plugin files only when it's needed with @section('plugins.Select2', true).

[DanielJoseDolz]

Thank you very much. I get it now