Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Android Chrome input date dimensions #36143

Merged
merged 8 commits into from
Jan 18, 2023
Merged

Fix Android Chrome input date dimensions #36143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
da517e1
Bind Hugo to 0.0.0.0, helps debug on mobile when on the same network
tkrotoff Apr 10, 2022
23c54d3
Use http-server for visual tests
tkrotoff Apr 10, 2022
2e9b517
Add input visual tests
tkrotoff Apr 10, 2022
75b795a
Fix input date dimensions on Android Chrome
tkrotoff Apr 10, 2022
87d62f3
Increase bootstrap.css max size
tkrotoff Apr 12, 2022
f749075
Revert "Bind Hugo to 0.0.0.0" & "Use http-server for visual tests"
tkrotoff Apr 12, 2022
d5ade51
Switch to pixels: this is an empirical minimum safe value
tkrotoff Jan 17, 2023
ffd3115
Update .bundlewatch.config.json
mdo Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "32.25 kB"
"maxSize": "32.5 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
Expand Down Expand Up @@ -63,4 +63,4 @@
"v4-dev"
]
}
}
}
79 changes: 79 additions & 0 deletions js/tests/visual/input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
<title>Form</title>
<style></style>
</head>
<body>
<div class="container">
<h1>Input <small>Bootstrap Visual Test</small></h1>

<h2>No layout</h2>

<div class="mb-3">
Text
<input class="form-control">
</div>
<div class="mb-3">
Email
<input type="email" class="form-control">
</div>
<div class="mb-3">
Number
<input type="number" class="form-control">
</div>
<div class="mb-3">
Date
<input type="date" class="form-control">
</div>

<h2>Flex</h2>

<div class="d-flex flex-wrap gap-3 mb-3">
<div>
Text
<input class="form-control">
</div>
<div>
Email
<input type="email" class="form-control">
</div>
<div>
Number
<input type="number" class="form-control">
</div>
<div>
Date
<input type="date" class="form-control">
</div>
</div>

<h2>Grid</h2>

<div class="row mb-3">
<div class="col">
Text
<input class="form-control">
</div>
<div class="col">
Email
<input type="email" class="form-control">
</div>
<div class="col">
Number
<input type="number" class="form-control">
</div>
<div class="col">
Date
<input type="date" class="form-control">
</div>
</div>
</div>

<script src="../../../dist/js/bootstrap.bundle.js"></script>
<script></script>
</body>
</html>
18 changes: 15 additions & 3 deletions scss/forms/_form-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down