select2 multiselect with checkbox and without checkbox on the same page

Starr Duskk
Starr Duskk used Ask the Experts™
on
I'm using the select2 multiselect with checkbox from this example:

https://codepen.io/lenamtl/pen/VwwWYzb

The problem is that when I set it up for my multiple select dropdowns, it overrides my regular that don't require checkboxes that are on the same page, because changes require that I override the default select2 css settings.

Is there a way to keep both the dropdown with the checkbox and the dropdown without the checkbox when it's not a multiselect?

Has anyone dealt with this?

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
NorieAnalyst Assistant

Commented:
Starr

Do you mean you want to use the same CSS for other multiselect dropdowns but without the checkbox?
Hi,

what you can do is to load the custom CSS only on page that is required if you only have one Select2 element on that page

You can initialize all your selects with
adaptDropdownCssClass: function(c) { if (c.indexOf("s2-dropdown")===0) return c; }

Open in new window

then any css class name you add to the original tag that starts with s2-dropdown prefix will be copied to the dropdown element.

If you have multiple select2 elements on the same page then you can load the custom css to specific select2 ID or class name
Similar to what you do for setting different options
https://select2.org/configuration/options-api
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Norie,

No, I have select2 for single select on the same page with the multi select. I only want the multiselect to have the checkboxes.

Lenamtl,

The page is mixed with single select and multi select. I only want the multi select to have the checkboxes. Looks like this is your code! :)

Can you give me an example of how to do the custom css to the specific id? I don't understand what is happening on that options page and how I would use that.

Would it be too much to ask if you created a codepen with two on the page. One single select without checkboxes and the one with?

thanks!
A quick way you can try using two theme let say classic and classic2 that should work , you will need to duplicate the actual theme and adapt with cutom code

$(".js-example-theme-single").select2({
  theme: "classic"
});

$(".js-example-theme-multiple").select2({
  theme: "classic2"
});

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Here are the two methods that are used:

.select2-results__option:before {

.select2-results__option[aria-selected=true]:before {

Open in new window


Looking at your code, it uses the keyword multiple:
.select2-selection .select2-selection--multiple:after {

Open in new window


Can those lines, which are unique to the multiple, have the "multiple" added to fix this? Is that an option?

thanks!
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
I'm also looking up themes to see how to create a theme, and I find nothing in the select2 search results other than the command you mentioned.
Hi,

I know there is no much info on their theme.

But what you need to know is that the theme must be scepify into the options not directly on the element.

$(".js-example-theme-multiple").select2({
  theme: "classic2"
});

Open in new window


What I would do is duplicating the theme you are using and give a different name
modifiy the actual class by the one provide into the Jsfiddle example

that should work fine.
Hi,

First look the theme from CSS file select2.css
lookup for classic

Duplicate (copy/paste) all releatded classic class and called it mycustom
Modify mycustom class then save the file

On your page make sure you called select2.css (an not the minified one select2.min.css)

$(".js-example-theme-multiple").select2({
  theme: "mycustom"
});

Open in new window


Select all
 
Open in new window


Clear the browser cache to make sure then check the result.

*Note if you are using Select2 with Datatables on the same page make sure you edit the Select2 that come with Datatables located into
...datatables\extensions\Select\css

If you try to use Select2 plugin downloaded from select2 and also select2 that come with Datatables you will have a conflict and you won't see the changes

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial