bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard
verified publisher icon twbs

Fix Android Chrome input date dimensions

Open tkrotoff opened this issue 3 years ago • 2 comments

Under Android Chrome, input date dimensions are broken:

  • too tall because of "margin: 1px 24px 1px 4px" inside the shadow DOM
  • width is too small by default

Before 40px high vs 38px for the other inputs:

before

After 38px high:

after

I've tested by plugging in my Android device via USB then opened chrome://inspect/#devices (USB debugging must be enabled on the device). Hence the need for an HTTP server

tkrotoff avatar Apr 10 '22 21:04 tkrotoff

Any news?

tkrotoff avatar Jun 14 '22 20:06 tkrotoff

Any news?

tkrotoff avatar Jul 23 '22 14:07 tkrotoff

Missed this myself. Is the width bug present in any other browser? I don’t have an Android to test myself.

mdo avatar Dec 29 '22 06:12 mdo

Visual tests js/tests/visual/input.html

On macOS Monterey 12.6.2:

  • Chrome 109: no problem
  • Firefox 108: no problem
  • Safari 16.2: no problem
  • Edge 109: no problem

On Android 13 (Pixel 4):

  • Chrome 109: width & height problem
  • Firefox 109: no problem

On iOS 16.2 (iPhone 14 Pro Max Simulator):

  • Safari 16.2: no height problem (thx to https://github.com/twbs/bootstrap/blob/v5.3.0-alpha1/scss/forms/_form-control.scss#L47-L53), width problem:

iOS 16.2 Safari 16.2

The width problem on Safari iOS is also fixed by this PR:

iOS 16.2 Safari 16.2 fix min-width: 10ch

tkrotoff avatar Jan 17 '23 01:01 tkrotoff

Finally! 😅

mdo avatar Jan 18 '23 05:01 mdo