apex select2 plugin not work well with oracle apex 20.1

Question

Need to add a multi select item into my oracle apex form. Tried to use apex select2 plugin. But it didn't work well. When I add into the form it looks like in the below image,

Then I tried to change the styles when page load with js. But I cannot access inner components of the select2 item. Are there any other plugins like this..? How do I use this component in my apex application.? any suggestions..?

Answer 1

You can use the Select2 plugin with the Universal Theme, but the current version does not work well with the "Optional - Floating" / "Required - Floating" item templates.

I always use either the "Optional" / "Required" templates (with the label shown to the left of the item) or the "Optional - Above" / "Required - Above" templates.

Also, I always find I need to set the Width plugin attribute to get it to look ok.

Answer 2

This is for apex 20.2. I added this css and it looks better. Maybe it will help others.

.select2-selection {position: relative;}
.select2-container {border: none; padding: 0;}
.select2-container .select2-selection--single
.select2-selection__clear {font-size: 14px; color: #888889; line-height: 28px;}
input.select2-search__field {outline-offset: 0;}
.t-Form-fieldContainer--floatingLabel.plugin-be\.ctb\.select2 .t-Form-labelContainer .t-Form-label {top: -1.2rem; font-size: 1.1rem}
.t-Form-fieldContainer--floatingLabel.plugin-be\.ctb\.select2 .apex-item-select.select2.select2-container {border-radius: 2px; border: 0.1rem solid #dfdfdf; padding-right: 8px !important}