CODEWITHSUNDEEP
javascriptphpcsssymfonyjquery-select2
eronn
eronn

Reputation: 1840

Symfony 4 - Use bootstrap 4 with Select2

in my symfony 4 project I use Select2 for some of my fields: https://select2.org/

So, I've this :

enter image description here

So, in my form, I've :

->add('user', EntityType::class, [
                'class' => User::class,
                'label' => 'Agent',
                'placeholder' => "Agent",
                'choice_label' => 'fullName',
                'choice_value' => 'fullName',
                'attr' => [
                    'class' => 'js-example-basic-single',
                ]
            ])

And in my view :

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

<script>
        $('.js-example-basic-single').select2({
            placeholder: 'Choisissez un agent',
            allowClear: true,
            language: 'fr'
            });
    </script>

I would like to use bootstrap 4 with this field, so that it has the same design as the other fields.

So, I found this link : https://github.com/ttskch/select2-bootstrap4-theme Is it a good link ?

It's the first time I use npm, so I executed the following command :

npm install @ttskch/select2-bootstrap4-theme

But I dont see where are the css links, to import them in my view

Upvotes: 1

Views: 2076

Answers (1)

Leszek
Leszek

Reputation: 182

You just have to pass correct theme name in select2 field definition. So in your case it will look like this:

 <script>
        $('.js-example-basic-single').select2({
            placeholder: 'Choisissez un agent',
            allowClear: true,
            language: 'fr',
            theme: 'bootstrap4',
            });
    </script>

If you're using webpack as official documentation suggest, you should add following lines:

assets/js/app.js

require('select2');

assets/css/app.scss:

@import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";

Upvotes: 2

Related Questions