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.

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

Remove explicit heights on form elements #31993

Merged
merged 3 commits into from
Oct 29, 2020
Merged

Conversation

MartijnCuppens
Copy link
Member

@MartijnCuppens MartijnCuppens commented Oct 27, 2020

Input heights were initially added in #26820 to fix #18842. Select heights were added to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1560824.

But:

However, removing the explicit height would reintroduce #23307. Luckily, date inputs have a ::-webkit-datetime-edit of which we can set the height in em 🎉

This means, we can safely remove those (min-)heights that seem to cause some issues like #26820 (comment) or #31955 (comment) (this fixes issues when zoomed in/out)

I've kept a min-height for textareas, to keep support for #29124

I didn't apply this change to .form-file, since this will introduce conflicts with #31955, therefor I'll keep this in draft.

@MartijnCuppens MartijnCuppens requested a review from a team as a code owner October 27, 2020 14:32
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hell. Yes. :shipit:

@MartijnCuppens
Copy link
Member Author

Don't merge this yet, I'm doing some tests withs input field heights to confirm this works (already found a bug in the current implementation which was solved in this PR, lol)

@MartijnCuppens
Copy link
Member Author

Ok, I made a codepen to check browsers with and it looks like we're ok with this change: https://codepen.io/MartijnCuppens/pen/JjKpbGd?editors=1010

I actually even found out there's a bug with the current implementation: https://codepen.io/MartijnCuppens/pen/PozQbqJ?editors=1010

@MartijnCuppens MartijnCuppens added this to Inbox in v5.0.0-alpha3 via automation Oct 28, 2020
@XhmikosR XhmikosR merged commit ed1d867 into main Oct 29, 2020
v5.0.0-alpha3 automation moved this from Inbox to Shipped Oct 29, 2020
@XhmikosR XhmikosR deleted the main-mc-remove-heights branch October 29, 2020 13:18
@patrickhlauke
Copy link
Member

i think this change now made <input type="color"> revert to its odd/small size - see for instance https://deploy-preview-32020--twbs-bootstrap.netlify.app/docs/5.0/forms/form-control/#color (from my other PR)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
v5.0.0-alpha3
  
Shipped
Development

Successfully merging this pull request may close these issues.

Temporal inputs are 2px taller than other textual inputs in Chrome
4 participants