Closed DanielJoseDolz closed 1 year ago
Please, share the code you have used to create the select2
component, and the plugin configuration you are using.
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!
I think you missed setup for Bootstrap4
(AdminLTE
is based on Bootstrap4
), try with next code:
'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',
],
],
],
<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.
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,
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:
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)
.
Thank you very much. I get it now
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!