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

Styling is missing Disabled options #60

Open
kobitate opened this issue Aug 1, 2020 · 3 comments
Open

Styling is missing Disabled options #60

kobitate opened this issue Aug 1, 2020 · 3 comments

Comments

@kobitate
Copy link

kobitate commented Aug 1, 2020

Dropdown is not showing proper styling for disabled options (Bulloch Animal Shelter in the example below)

{
   "results":[
      {
         "id":"1",
         "text":"Community",
         "disabled":false
      },
      {
         "id":"2",
         "text":"Bulloch Animal Shelter",
         "disabled":true
      },
      {
         "id":"3",
         "text":"Metter Animal Shelter",
         "disabled":false
      },
      {
         "id":"4",
         "text":"Evans County Animal Shelter",
         "disabled":false
      }
   ],
   "pagination":{
      "more":false
   }
}

Select2 default theme:
image

With this repo theme. item is disabled but not styled as such:
image

@squatto
Copy link

squatto commented Sep 8, 2020

You can correct this by adding this to your site's CSS:

.select2-container--bootstrap4 .select2-results__option[aria-disabled=true] {
    color: #999;
}

I'm open to submitting a PR to fix this, but it seems like the repo is stale (no PRs have been merged since 2019)

tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 3, 2021
- 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
@tagliala
Copy link
Contributor

tagliala commented Mar 3, 2021

I've fixed this into #67

tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 3, 2021
- 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
@squatto
Copy link

squatto commented Mar 3, 2021

Thank you @tagliala !

tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 3, 2021
- 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
tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 13, 2021
- 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
tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 14, 2021
- 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
tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 14, 2021
- 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
tagliala added a commit to tagliala/select2-bootstrap4-theme that referenced this issue Mar 14, 2021
- 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
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

No branches or pull requests

3 participants