Divi-Engine/code-snippets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hide disabled selec2 filter options

Browse Source
This commit is contained in:
Pavak Paul 2023-07-25 18:49:12 +05:30
parent a407e6825f
commit 2953301b08
3 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
hide-disabled-filter-options-for-select2/README.md Normal file
View File

@ -0,0 +1,21 @@
By default, Select2 doesn't hide any empty filter options. Instead, it makes them disabled which prevents clicking them. This works well when you only have a few filter options but for large filter options, it might be better to hide them instead.
### If you want to hide the disabled filter options globally, use [this CSS](hide-globally-style.css):
```css
/* Hide disabled (empty) options for select2 globally */
.select2-results__option--disabled {
display: none;
}
```
### If you want to hide the disabled filter options for particular filter or filter item, use [this CSS](hide-specific-filters-style.css):
```css
/* Hide disabled (empty) options for select2 in specific filters only */
/* Add the class hide-empty-select2-options to a Filter Posts module or to a particular Filter Item to hide empty options for that particular Filter Posts module or Filter item only */
.hide-empty-select2-options .select2-results__option--disabled {
display: none;
}
```
Add this CSS class to the Filter Posts module or the Filter Item: `hide-empty-select2-options`.

4
hide-disabled-filter-options-for-select2/hide-globally-style.css Normal file
View File

@ -0,0 +1,4 @@
/* Hide disabled (empty) options for select2 globally */
.select2-results__option--disabled {
display: none;
}

5
hide-disabled-filter-options-for-select2/hide-specific-filters-style.css Normal file
View File

@ -0,0 +1,5 @@
/* Hide disabled (empty) options for select2 in specific filters only */
/* Add the class hide-empty-select2-options to a Filter Posts module or to a particular Filter Item to hide empty options for that particular Filter Posts module or Filter item only */
.hide-empty-select2-options .select2-results__option--disabled {
display: none;
}