Replies

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 2018

  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 Posts: 37Questions: 9Answers: 1

  March 2018

  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 Posts: 37Questions: 9Answers: 1

  April 2018 edited April 2018

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2018

  Super - thanks for posting back and letting me know!

  Allan