Avatar of Starr Duskk
Starr Duskk
Flag for United States of America asked on

select2 multiselect with checkbox and without checkbox on the same page

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!
CSSJavaScript

Avatar of undefined
Last Comment
lenamtl

8/22/2022 - Mon
Norie

Starr

Do you mean you want to use the same CSS for other multiselect dropdowns but without the checkbox?
ASKER CERTIFIED SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Starr Duskk

ASKER
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!
SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Starr Duskk

ASKER
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!
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Starr Duskk

ASKER
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.
SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.