mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki Activity

Fix Android Chrome input date dimensions (#36143)

Browse Source 
* Bind Hugo to 0.0.0.0, helps debug on mobile when on the same network

* Use http-server for visual tests

* Add input visual tests

* Fix input date dimensions on Android Chrome

* Increase bootstrap.css max size

* Revert "Bind Hugo to 0.0.0.0" & "Use http-server for visual tests"

* Switch to pixels: this is an empirical minimum safe value

* Update .bundlewatch.config.json

Co-authored-by: Mark Otto <otto@github.com>
This commit is contained in:
Tanguy Krotoff
2023-01-18 06:09:39 +01:00
committed by GitHub
parent 16aff741ec
commit 1369b81492
3 changed files with 96 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
scss/forms/_form-control.scss
View File

@@ -44,12 +44,24 @@
}
}
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
&::-webkit-date-and-time-value {
// On Android Chrome, form-control's "width: 100%" makes the input width too small
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
//
// On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
// Tested under iOS 16.2 / Safari 16.2
min-width: 85px; // Seems to be a good minimum safe width
// Add some height to date inputs on iOS
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
// Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
margin: 0;
}
// Prevent excessive date input height in Webkit