"Blank" Glyphicon
Posted: 2024-04-14 04:06
Good morning,
in a custom calendar page I have added a dropdown-button for setting filters. All dropdown options should indicate whether they are checked or not.
For checked options I can use Icon
Problem
As far as I know there is no "blank" glyphicon having the same width as other glyphicons, by default. So, unchecked options (without icon) will have a different indentation than checked options as you can see here:
Personally, I dislike this. I would like to see identical text-indentation for all options.
Solution
I have found a very short CSS hack which "adds" a blank glyphicon:
Additional CSS
Now all options are well-aligned which I really prefer:
Just wanted to share this tiny CSS hack with you!
See also:
in a custom calendar page I have added a dropdown-button for setting filters. All dropdown options should indicate whether they are checked or not.
For checked options I can use Icon
glyphgicon-ok.Problem
As far as I know there is no "blank" glyphicon having the same width as other glyphicons, by default. So, unchecked options (without icon) will have a different indentation than checked options as you can see here:
- chrome_5oF2QSo4El.png (6.55 KiB) Viewed 2212 times
Personally, I dislike this. I would like to see identical text-indentation for all options.
Solution
I have found a very short CSS hack which "adds" a blank glyphicon:
Additional CSS
Code: Select all
.glyphicon-blank:before {
content: "\2122";
color: transparent !important;
}
- Icon for unckecked option:
<i class="glyphicon glyphicon-blank"></i>
Note thatglyphicon-blankdoes not exist, by default. - Icon for ckecked option:
<i class="glyphicon glyphicon-ok"></i>
Now all options are well-aligned which I really prefer:
- chrome_Lz62OAH4nH.png (22.07 KiB) Viewed 2212 times
Just wanted to share this tiny CSS hack with you!
See also: