Editor Select2 plug-in, Bootstrap theme breaks the select field

carlop

I am using Editor-1.7.3 with https://editor.datatables.net/plug-ins/field-type/editor.select2 plug-in and Select2 Bootstrap theme https://github.com/select2/select2-bootstrap-theme.
The demo can be viewed at https://nfctech.eu/datatables/editor-select2-bootstrap.html.
When I click on the "New" button and the form modal opens, the use of Select2 Bootstrap theme breaks the select field.
The code used in the demo is

{
            "label": "NAZIONE*:",
            "name": "nazione",
            "type": "select2",
            "options": [
              "Italia",
              "Francia",
              "Germania",
              "Russia",
              "Stati Uniti"
            ],
            "opts": {
            "placeholder": "Seleziona una nazione",
            "allowClear": true,
            "theme": "bootstrap"
            }
          },
          {
            "label": "AREA*:",
            "name": "area",
            "type": "select2",
            "options": [
              "Francia",
              "Nord Italia",
              "Russia",
              "Americhe"
            ],
            "opts": {
            "placeholder": "Seleziona un'area di competenza",
            "allowClear": true,
            }
          },

where the select "NAZIONE" makes use of the Select2 Bootstrap theme and the select "AREA" no.
As you can see from the demo,:
- the select "NAZIONE" has no border at all and the Bootstrap theme is applied only partially when the select is opened
- the select "AREA", that does not use the Select2 Bootstrap theme, is displayed correctly according to the default Select2 theme.
I checked the implementation and it seems correct. Any idea about the cause of this issue?
Thanks

allan

I think the problem here is order of execution. What should happen is that the Bootstrap theme for Select2 will copy the form-control class name over to a span element from the select. However, Editor only adds that class to the control after the Select2 code has initialised the list, so it never gets copied across and thus the styling fails.

Could you try using:

attr: {
  "class": "form-control"
}

inside the configuration object for the field? That would set the class name on initialisation until I figure out a better way to handle this.

Allan

carlop

Hi Allan, thanks. The new code according to your suggestion is:

{
            "label": "NAZIONE*:",
            "name": "nazione",
            "type": "select2",
            "options": [
              "Italia",
              " Francia",
              " Germania",
              " Russia",
              " Stati Uniti"
            ],
            "opts": {
              "placeholder": "Seleziona una nazione",
              "allowClear": true,
              "theme": "bootstrap"
            },
            attr: {
              "class": "form-control"
            }
          },
          {
            "label": "AREA*:",
            "name": "area",
            "type": "select2",
            "options": [
              "Francia",
              "Nord Italia",
              "Russia",
              "Americhe"
            ],
            "opts": {
              "placeholder": "Seleziona un'area di competenza",
              "allowClear": true,
              "minimumResultsForSearch": "Infinity",
              "theme": "bootstrap"
            },
            attr: {
              "class": "form-control"
            }
          },

but the selects still appear broken, see https://nfctech.eu/datatables/editor-select2-bootstrap.html
Did I implement correctly your suggestion?
Thanks

carlop

Hi Allan, the issue is now solved (the demo is now working correctly with the select2 Bootstrap theme), there was an error in my code.
The code I posted ad the beginning of the post is correct and to use the select2 Bootstrap theme it is sufficient to use

"opts": {
  "theme": "bootstrap",
}

and there is no need to add

attr: {
  "class": "form-control"
}

Thanks.

allan

Super - thanks for posting back and letting me know!

Allan