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.
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:
Additional context
I realize that there is a
hoo-input-dateclass as well, but found that it missed some functionality fromhoo-input-text, or I was using it wrong. Either way,hoo-input-textdid 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:
Fixed height is OK, since these field types are not multi-line.