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

Fix pseudo paddings and height #30269

Merged
merged 3 commits into from
Mar 14, 2020
Merged

Conversation

MartijnCuppens
Copy link
Member

It turns out the height of date inputs (#18842) are increased by the padding on the pseudo elements and the fixed height of 1.5rem of the ::-webkit-inner-spin-button.

I've now reset these paddings and height instead of hacking with the line-height.

Codepen to play with: https://codepen.io/MartijnCuppens/pen/wvBLzvb?editors=1100

@MartijnCuppens MartijnCuppens requested a review from a team as a code owner February 22, 2020 21:02
@MartijnCuppens MartijnCuppens added this to Inbox in v5.0.0-alpha2 via automation Feb 22, 2020
@mdo
Copy link
Member

mdo commented Feb 23, 2020

Holy shit, is this really the cause of all that pain? No requirement for fixed heights on form controls now? :D

@ysds
Copy link
Member

ysds commented Feb 24, 2020

On iOS (Chrome/Safari) there still seems to be a problem.

@MartijnCuppens
Copy link
Member Author

@ysds, do you mean this: #30353?

@ysds
Copy link
Member

ysds commented Mar 9, 2020

@ysds, do you mean this: #30353?

yep :)

@MartijnCuppens
Copy link
Member Author

MartijnCuppens commented Mar 10, 2020

FYI, this patch is unrelated to #30353.

Holy shit, is this really the cause of all that pain? No requirement for fixed heights on form controls now? :D

Not sure about that, we got to check that in #30353. We added min-height in the end to make sure textareas don't shrink too much when the native resizer is used (#29124). This patch just resets the right properties that cause the unequal heights for text & date inputs instead of the hack I used before which worked while I had no clue why it did 😛

@ysds
Copy link
Member

ysds commented Mar 14, 2020

BTW should add date input example on our docs like color if we support those.

Updated: Oops I intended to comment this on #30353.

Copy link
Member

@ysds ysds left a comment

Choose a reason for hiding this comment

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

LGTM

v5.0.0-alpha2 automation moved this from Inbox to Approved Mar 14, 2020
@MartijnCuppens MartijnCuppens removed this from Approved in v5.0.0-alpha2 Mar 14, 2020
@MartijnCuppens MartijnCuppens added this to Inbox in v5 via automation Mar 14, 2020
@MartijnCuppens MartijnCuppens merged commit 4d4400e into master Mar 14, 2020
v5 automation moved this from Inbox to Shipped Mar 14, 2020
@MartijnCuppens MartijnCuppens deleted the master-mc-fix-date-height branch March 14, 2020 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
v5
  
Shipped
Development

Successfully merging this pull request may close these issues.

None yet

3 participants