Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#3719 Remove bootstrap-select and replace with select2 #3763

Merged
merged 8 commits into from
Sep 4, 2023

Conversation

kristenking
Copy link
Contributor

@kristenking kristenking commented Jul 23, 2023

Changes Made:

  • Replaced bootstrap-select with select2 in the organization edit page.
  • Removed the bootstrap-select gem from the Gemfile.
  • Updated connected spec test

Screenshots:

Organization Edit Page with bootstrap-select:
bootstrap-select

Organization Edit Page with select2:
select2

Tests:
Performed tests manually on the client side
Ran organization_system_spec.rb successfuly
Ran all rspec tests sucessfully

Notes and Questions:
I still need to improve UI in changed code. Should I add styles to the custom-select class or create a separate one for this dropdown? Alternatively, are there any out-of-the-box solutions that would work well here?

As it is the first time I work with this codebase, just wanted to ensure if I'm heading in the right direction. If there's a different approach that would be more suitable for this issue, please let me know, and I'll address it promptly.

Thank you a lot for your review!

@dorner
Copy link
Collaborator

dorner commented Jul 23, 2023

It's definitely the right approach! I'm pretty sure we use select2 with multi-select successfully on other pages, so maybe check one of those to see how it's done? The UI definitely doesn't look great in that screenshot.

@kristenking
Copy link
Contributor Author

What I've Tried:

  • Added custom CSS in application.scss to override the default Select2 styles.
  • Played around with the inline styles directly in the Developer Tools.
  • Looked into our existing codebase to find any references to the usage of Select2 "multiple", but couldn't find any.

Problems Encountered:

  • The items chosen in the dropdown have a weird blue background and the delete ('x') icon overlaps with the text.
  • My custom styles are not reflecting any changes.

Request for Help:

I feel like I've hit a blocker and could use some additional perspectives on this issue. If anyone has experience styling Select2 dropdowns, your input would be greatly appreciated. Would love to pair up to solve this quicker if anyone is available.

@dorner
Copy link
Collaborator

dorner commented Aug 25, 2023

I added these to application.scss and it seems to look a lot better:

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  padding-left: 28px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 0;
  width: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background-color: #8282df
}

@kristenking
Copy link
Contributor Author

Thank you so much for your help @dorner ! My problem was silly but I am glad I found the issue: I was adding styling to application.scss under javascript folder not assets. This is how it looks now after adding styling:

image

@dorner
Copy link
Collaborator

dorner commented Sep 4, 2023

Nice, looks good! Thanks!

@dorner dorner merged commit fbadb55 into rubyforgood:main Sep 4, 2023
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants