n8design
Some inputs have wrong height on mobile browsers
Describe the bug
<select> and <input type="date"> looks OK in desktop browser, but does not have the same height as <input type="text"> on some mobile browsers.
To Reproduce
Steps to reproduce the behavior:
<select class="hoo-input-text><!-- omitted --></select>
<input type="date" class="hoo-input-text">
Expected behavior
Same height as <input type="text" class="hoo-input-text">
Smartphone:
- Device: Samsung Galaxy S1
- OS: Android
- Browser: Samsung Internet
Additional context
I realize that there is a hoo-input-date class as well, but found that it missed some functionality from hoo-input-text, or I was using it wrong. Either way, hoo-input-text did everything I wanted out of the box, except for this issue.
I know the <select> tag is not in the style guide so technically not a bug, but works just as well as the date field I mentioned before. I can open a separate feature request issue for it if you want.
My workaround:
select.hoo-input-text,
input[type="date"].hoo-input-text {
height: 1.875rem;
}
Fixed height is OK, since these field types are not multi-line.
Font size for .hoo-input-text is 0.875rem. Font size on html/body is undefined in CSS in my case so it defers to my browser settings.
Yes but if you change the font of your OS that the browser shows smaller text, this changes the font size on root. There is now browser default other then the default setting is set to 16px. Can you share a screenshot?
Yeah that makes sense, seems like the have a different implementation of the control.
Indeed. Luckily, setting the height of the control works in this case. Also, font is not matching, but at least it looks better when height is matching.
I frequently use BrowserStack for device testing. They have a sponsorship program for open source projects. https://www.browserstack.com/open-source