Internet Explorer: Filter Box Text Misplaced
Closed this issue · 5 comments
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari] IE
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
I read about this bug from Sara Cope email about the release of the style guide for code.gov. I'm going to add comments here instead of doing a PR since I believe this to be a little more expedient. Please let me know if you'd rather I submitted one.
I believe you can resolve some of the problem with this ticket by adding display: inline-block to your [type=checkbox] + label rule. This way the inner span doesn't overflow the external label in IE.
You also might want to remove the padding-right: 1.75rem from filter-box .filter-box ul.options li label span since it doesn't seem necessary with the previous change.
You'll need to work with the positioning of the :before checkbox, but I think this would get you most of the way to a consistent appearance. Please let me know if I can help with this in any way!
Thanks for the guidance here @peterbenoit! We are helping with a hackathon on May 18th, so I'm going to leave this available in case any folks want to PR during that event. 🙏
Is this bug still open? I'm not seeing it on Win 10, IE 11.657.18362.0
Thanks @rkramer1964!
I assume it is still relevant. I would need to test to make sure and this is not priority for us right now. If you test and find it is still relevant, please update here. Thanks.
Deprecating the repo as it's no longer used by Code.gov.