Refactor as custom select + Select2 4.1 compatibility #67

tagliala · 2021-03-02T16:59:16Z

Close: #19, #49, #51, #60, #61

Add compatibility with Select2 4.1
Uses Bootstrap's custom-select implementation for uniformity
Use SVG background image for clear button
Add some lints to improve code readability
Use the same Browserlist configuration as Bootstrap 4.6
Add SCSS variables for easier customization [Suggestion] add a variables file, allow modifying the variables used in the scss files #51
Add support for feedback validation icons

Fixes the following existing issues:

Missing input focus in single select dropdown
Fix input color in single select dropdown
Fix cursor pointer when hovering on search input in disabled select
Fix disabled color Styling is missing Disabled options #60

Waiting for the proper branch to pushing against

Please help me testing

Screenshots

tagliala · 2021-03-02T17:00:27Z

@tagliala
I have tested your reimplementation. I like it, but there seems to be a bug with an empty multiselect.
Have a look at the following screenshot:

NordicAT · 2021-03-02T18:24:34Z

@tagliala
I just figured out the issue.
I am sorry - It does not have anything to do with your code/css.

I had a custom-fix for an issue in my CSS, which is described here: Placeholder being cut off?

This is hopefully not necessary anymore. After removing this, the reported issue disappeared of course.

I am sorry and thank you for the support.

tagliala · 2021-03-02T18:35:38Z

Hi @NordicAT, don't worry, you're welcome.

Hi. I think this is a known issue since 2012 when select2 with multiselect is initialized inside a hidden element.

I can try how to replicate, but maybe this has been fixed upstream in select2 4.1

NordicAT · 2021-03-02T18:42:15Z

May it be the case, that the font-family of the placeholder-text differs from a Single-Select to a Multi-Select?

tagliala · 2021-03-02T19:33:13Z

I can confirm an issue with font-family. It is being stripped out from the dist css and I should fix a rule. I'm investigating

tagliala · 2021-03-02T19:52:04Z

@NordicAT fixed, thanks

NordicAT · 2021-03-02T20:28:52Z

I can confirm, that the font-family issue is fixed with the latest CSS - Thank you! 👍

I believe there is something wrong with Multi-Select.

The screenshot below shows a Multi-Select from the original Select2-docs:

Items that have been already selected have a grey background in the list.

First issue:

When looking on the same situation with your/our CSS for BS4 the background is way too light in my opinion. It may be, that my monitor has too less contrast, but I can hardly see a difference between selected and not selected items:

It must not be as dark as in the original Select2 CSS.

Second issue:

As in the screenshot above I see a light-grey background on selected items in the list.
If I hoover over those items using the mouse-cursor, they lose their light-grey background. I have to reopen the list to bring it back.

I hope this issues are not in my environment only ...

tagliala · 2021-03-02T20:50:31Z

When looking on the same situation with your/our CSS for BS4 the background is way too light in my opinion

Agreed. Let me check how bootstrap deals with this. edit: I've just used ~~10% darken background~~ the disabled color bg

As in the screenshot above I see a light-grey background on selected items in the list.

Replicated. It is also an issue at https://ttskch.github.io/select2-bootstrap4-theme/

tagliala · 2021-03-02T21:22:26Z

@NordicAT fixed both

NordicAT · 2021-03-02T21:51:20Z

@tagliala
Wow - Thank you very much! ☺️
I can confirm that both issues are fixed.

Just a small cosmetic one:

When activating a Multi-Select by clicking on it, the select-box gets a blue outer-glow:

When activating a Single-Select by clicking on it, the select-box does not get a blue outer-glow.

It gets glowing after an item has been selected.

I may be wrong, but for me this does not seem consistent.
Looking at the Bootstrap-Docs the Select is glowing when activating:
https://getbootstrap.com/docs/4.6/components/forms/

tagliala · 2021-03-02T22:10:57Z

@NordicAT done.

I've added the focus style to the properly focused input element, as in the default Select2

NordicAT · 2021-03-03T06:49:54Z

I just use basic features of Select2 and for me it is working fine now.
There is nothing to complain about.

Thank you very much for your effort! ❤️ 👌
Hope there will be an official release soon ...

- Update jQuery to 3.6.0 - Fix Boostrap CSS to 4.6.0 - Update to Select2 4.1.rc0 - Add pre-selected examples - Add default select fields

- Uses Bootstrap's `custom-select` implementation for uniformity - Use SVG background image for clear button - Add some lints to improve code readability - Use the same Browserlist configuration as Bootstrap 4.6 Ref: https://getbootstrap.com/docs/4.6/components/forms/#select-menu Close: ttskch#49, ttskch#60, ttskch#61, ttskch#19

Close ttskch#51

Revert when select2/select2#5993 is fixed

Move styles inside theme

tagliala · 2021-03-14T17:31:18Z

I've fixed a couple of issues with validation focus and validation icons are now supported also in select multiple

Rikijs · 2021-03-19T19:22:07Z

I've fixed a couple of issues with validation focus and validation icons are now supported also in select multiple

That is great news!

Rikijs · 2021-03-19T19:25:40Z

@tagliala please share your estimate when release/tag could be made?

tagliala · 2021-03-19T19:45:31Z

This is not my repository, apologies

yads · 2021-03-19T19:55:03Z

I've been using your branch @tagliala and following this PR for changes. Appreciate the work! Have you considered publishing your changes to npm under @tagliala/select2-bootstrap4-theme?

Rikijs · 2021-03-20T12:32:47Z

I apologize for the negligence.

NordicAT · 2021-03-20T14:19:03Z

@tagliala

Hi, I was trying to create a Bootstrap Horizontal form with Select2 selects.
It looks like this:

There seems to be a problem in Smartphone-size:

I have created the following JSFiddle using a strapped-down sample-code to reproduce the issue:
https://jsfiddle.net/612pmajt/3/

I am not sure about the problem-source. It may not be the fault of the select2-bootstrap4-theme.
I can't exclude my own code. Could you please have a short look?

Thank you

tagliala · 2021-03-20T15:17:16Z

This theme does not support Bootstrap 5

NordicAT · 2021-03-20T15:43:43Z

@tagliala
I am sorry ✌️ - this was a mistake when adding the resources to the JSFiddle.
Here is the updated one with 4.6 CSS & JS: https://jsfiddle.net/5we3zL0t/

tagliala · 2021-03-20T16:25:37Z

I've got the issue, but I don't know if 100% should be forced in the CSS

Please add width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style', to the initializer

Ref: https://github.com/ttskch/select2-bootstrap4-theme/blob/master/docs/script.js#L5

NordicAT · 2021-03-20T16:36:32Z

@tagliala
Working fine - Thank you very much! 👌

I have just realized that this may not be an issue for the end-user, because on page load it is displayed OK.

Rikijs · 2021-03-26T16:08:03Z

@tagliala Could you please assess what is stil missing to finish this pull request?

tagliala · 2021-03-26T16:29:32Z

@Rikijs since this is not backward compatible, it needs another branch on this repo to push against

manuelmeurer · 2022-02-11T13:44:07Z

@tagliala @ttskch What else is needed to get this merged/released? Can I help in any way?

dwasyl · 2023-01-11T17:54:20Z

@tagliala Does this version still support 4.0.x as well, or only 4.1? (It does)

But, looking at the svg image used for the clear button, it seems to include a background image with an "X", whereas 4.0 includes an X in the text. Is there a reason for including the X in the svg (or how does one remove the default Select2 X)?

tagliala mentioned this pull request Mar 2, 2021

Updated toolchain, impoved multiselects and compatibility to select2 4.1 #56

Open

tagliala force-pushed the feature/refactor-as-custom-select branch from d00a85e to 79d4f47 Compare March 2, 2021 17:57

tagliala force-pushed the feature/refactor-as-custom-select branch from 79d4f47 to a4cf08d Compare March 2, 2021 19:24

tagliala force-pushed the feature/refactor-as-custom-select branch from a4cf08d to 8f13c45 Compare March 2, 2021 19:51

tagliala changed the title ~~Feature/refactor as custom select~~ Refactor as custom select + Select2 4.1 compatibility Mar 2, 2021

tagliala force-pushed the feature/refactor-as-custom-select branch from 8f13c45 to 7a549ba Compare March 2, 2021 21:19

tagliala force-pushed the feature/refactor-as-custom-select branch from 7a549ba to df3c43e Compare March 2, 2021 21:45

tagliala force-pushed the feature/refactor-as-custom-select branch from df3c43e to 3edb9df Compare March 2, 2021 22:09

tagliala force-pushed the feature/refactor-as-custom-select branch 3 times, most recently from c00bbfe to ffe389d Compare March 3, 2021 00:09

tagliala force-pushed the feature/refactor-as-custom-select branch from ffe389d to a689372 Compare March 3, 2021 09:17

tagliala mentioned this pull request Mar 3, 2021

Use custom-select-% variable instead of input #61

Closed

tagliala force-pushed the feature/refactor-as-custom-select branch 2 times, most recently from 1a0c800 to 3c59426 Compare March 3, 2021 14:40

This was referenced Mar 3, 2021

Styling is missing Disabled options #60

Open

[Suggestion] add a variables file, allow modifying the variables used in the scss files #51

Open

tagliala force-pushed the feature/refactor-as-custom-select branch from 3c59426 to 88f0800 Compare March 3, 2021 15:29

tagliala force-pushed the feature/refactor-as-custom-select branch from 4a90287 to 9b98147 Compare March 14, 2021 11:41

tagliala mentioned this pull request Mar 14, 2021

Bootstrap 5 theme incoming any time soon? #66

Open

Update demo

34f5878

- Update jQuery to 3.6.0 - Fix Boostrap CSS to 4.6.0 - Update to Select2 4.1.rc0 - Add pre-selected examples - Add default select fields

tagliala force-pushed the feature/refactor-as-custom-select branch from 46f875b to 19d789a Compare March 14, 2021 16:07

tagliala added 5 commits March 14, 2021 17:11

Update README

5f70c4c

Add SCSS variables

954b920

Close ttskch#51

Add support for feedback icons

0b2711e

Downgrade jQuery to 3.5.1

c848489

Revert when select2/select2#5993 is fixed

tagliala force-pushed the feature/refactor-as-custom-select branch from 19d789a to c848489 Compare March 14, 2021 16:11

Refactor layout

413d62c

Move styles inside theme

tagliala added 2 commits March 22, 2021 13:55

Fix empty select height without allow clear

68adcb0

Fix readme

2ae0825

antoniosmgatto mentioned this pull request Apr 7, 2021

select2 multiple select dropdown css issue #68

Open

Fix multiline tags

b9b12e4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor as custom select + Select2 4.1 compatibility #67

Refactor as custom select + Select2 4.1 compatibility #67

tagliala commented Mar 2, 2021 •

edited

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021 •

edited

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021 •

edited

tagliala commented Mar 2, 2021 •

edited

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021

NordicAT commented Mar 3, 2021

tagliala commented Mar 14, 2021

Rikijs commented Mar 19, 2021

Rikijs commented Mar 19, 2021

tagliala commented Mar 19, 2021

yads commented Mar 19, 2021 •

edited

Rikijs commented Mar 20, 2021

NordicAT commented Mar 20, 2021

tagliala commented Mar 20, 2021

NordicAT commented Mar 20, 2021 •

edited

tagliala commented Mar 20, 2021

NordicAT commented Mar 20, 2021 •

edited

Rikijs commented Mar 26, 2021

tagliala commented Mar 26, 2021

manuelmeurer commented Feb 11, 2022

dwasyl commented Jan 11, 2023 •

edited

Refactor as custom select + Select2 4.1 compatibility #67

Are you sure you want to change the base?

Refactor as custom select + Select2 4.1 compatibility #67

Conversation

tagliala commented Mar 2, 2021 • edited

Screenshots

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021 • edited

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021 • edited

First issue:

Second issue:

tagliala commented Mar 2, 2021 • edited

tagliala commented Mar 2, 2021

NordicAT commented Mar 2, 2021

tagliala commented Mar 2, 2021

NordicAT commented Mar 3, 2021

tagliala commented Mar 14, 2021

Rikijs commented Mar 19, 2021

Rikijs commented Mar 19, 2021

tagliala commented Mar 19, 2021

yads commented Mar 19, 2021 • edited

Rikijs commented Mar 20, 2021

NordicAT commented Mar 20, 2021

tagliala commented Mar 20, 2021

NordicAT commented Mar 20, 2021 • edited

tagliala commented Mar 20, 2021

NordicAT commented Mar 20, 2021 • edited

Rikijs commented Mar 26, 2021

tagliala commented Mar 26, 2021

manuelmeurer commented Feb 11, 2022

dwasyl commented Jan 11, 2023 • edited

tagliala commented Mar 2, 2021 •

edited

tagliala commented Mar 2, 2021 •

edited

NordicAT commented Mar 2, 2021 •

edited

tagliala commented Mar 2, 2021 •

edited

yads commented Mar 19, 2021 •

edited

NordicAT commented Mar 20, 2021 •

edited

NordicAT commented Mar 20, 2021 •

edited

dwasyl commented Jan 11, 2023 •

edited