search

ttskch / select2-bootstrap4-theme

Select2 v4 theme for Bootstrap4
MIT License
435 stars 206 forks source link

Refactor as custom select + Select2 4.1 compatibility #67

Open tagliala opened 3 years ago

tagliala commented 3 years ago

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

Fixes the following existing issues:

Waiting for the proper branch to pushing against

Please help me testing

Screenshots

image

image

tagliala commented 3 years ago

@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:

Select2-Multiselect

NordicAT commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

Placeholder

tagliala commented 3 years ago

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 commented 3 years ago

@NordicAT fixed, thanks

NordicAT commented 3 years ago

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

I believe there is something wrong with Multi-Select.

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

Select2

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:

Select2-BS4

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 commented 3 years ago

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 commented 3 years ago

@NordicAT fixed both

NordicAT commented 3 years ago

@tagliala Wow - Thank you very much! :relaxed: 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:

Multi-Select

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

Single-Select

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 commented 3 years ago

@NordicAT done.

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

NordicAT commented 3 years ago

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! :heart: :ok_hand: Hope there will be an official release soon ...

Rikijs commented 3 years ago

Hi!

Thanks for updating Select2 Bootsrtap4 Theme!

Does updated (in development) select2-bootstrap4-theme theme is compatible with form validation with jQuery validation updated (Bootstrap v4.6 custom select) design?

I guess it should, but want to be on the safe side. (Did not see any examples in your screenshots).

Probably - with single select - it should be ok. Yet on multiple select close button may conflict with satus (valid/invalid field) icon.

tagliala commented 3 years ago

Does updated (in development) select2-bootstrap4-theme theme is compatible with form validation with jQuery validation updated (Bootstrap v4.6 custom select) design?

If the answer is yes to both, could you please create a fiddle and check that this update didn't break things?

Rikijs commented 3 years ago

1

Is the previous version of this theme compatible with that plugin?

I think it is partly compatible (when validating border is green/red but no success/error icon is displayed)

2

Is Select2 4.1 rc0 with the default theme compatible with that plugin?

Sadly, i can not find info about support of jQuery validation with Select2 v4. Issues on GItHub with this keyword seem to be 5 years old and reference older version of Select2.

3 As this issue reads "Refactor as custom select + Select2 4.1 compatibility" i hope that changes to markup (based on Bootstrap v4.6 custom-select) allows to display icons indicating validations success/fail icons additionally to field border.

tagliala commented 3 years ago

As this issue reads "Refactor as custom select + Select2 4.1 compatibility" i hope that changes to markup (based on Bootstrap v4.6 custom-select) allows to display icons indicating validations success/fail icons additionally to field border.

I can fix this

tagliala commented 3 years ago

@Rikijs

image

with focus:

image

Will add custom variables and commit

Rikijs commented 3 years ago

Looks good! Perhaps, there should be a litte more spacing between field clear icon and validation status success/error icon.

tagliala commented 3 years ago

@Rikijs done

Rikijs commented 3 years ago

Great! Just a litle typo in updated image of different states. It is saying "Invalid example" 2 times.

Rikijs commented 3 years ago

Question: Is it currently posible to change color of all select2 borders in one go in one place? Default is too light for my current project and overriding seams to be planed in this isssue. Yet overriding in CSS (using 1.5.2 version) overrides success/error states. (I might be overriding not efficiently.) Variables file would be preferable solution.

tagliala commented 3 years ago

Question: Is it currently posible to change color of all select2 borders in one go in one place?

The only variable used for border color should be $select2-bootstrap4-border-color. Danger and Success are inherited from bootstrap

Yet overriding in CSS (using 1.5.2 version) overrides success/error states. (I might be overriding not efficiently.)

If you need to override via CSS, you should preserve the order of rules and css specificity

tagliala commented 3 years ago

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

Rikijs commented 3 years ago

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 commented 3 years ago

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

tagliala commented 3 years ago

This is not my repository, apologies

yads commented 3 years ago

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 commented 3 years ago

I apologize for the negligence.

NordicAT commented 3 years ago

@tagliala

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

HorizontalForm

There seems to be a problem in Smartphone-size:

HorizontalForm-SM

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 commented 3 years ago

This theme does not support Bootstrap 5

NordicAT commented 3 years ago

@tagliala I am sorry :v: - 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 commented 3 years ago

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 commented 3 years ago

@tagliala Working fine - Thank you very much! :ok_hand:

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

Rikijs commented 3 years ago

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

tagliala commented 3 years ago

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

manuelmeurer commented 2 years ago

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

dwasyl commented 1 year ago

@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)?