Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TextField] vertical height incorrect (visually comparing to spec)

See original GitHub issue

Problem description

Current normal vertical spacing is incorrect.

This is especially apparent when vertically oriented with helper texts present.

Example: required_fields_-_dummy_com

Versions

Material-UI: v1-alpha
Browser: Chrome

Images & references

text_fields_-components-_material_design_guidelines

Some of this was discussed in #7109, and closed in lieu of #7113, but it seems we still have a bit to go to get this both spec compliant for normal vertical spacing as well as adding the dense implementation.

/cc @kybarg @MichaelMure

Issue Analytics

State:
Created 6 years ago
Comments:7 (6 by maintainers)

Top GitHub Comments

1reaction

mebatescommented, Nov 13, 2017

Hello! Designer coming in late here, but it looks like the total height of the field should be 80 px. It’s a bit hard to find, but Google specs that out on the errors page: https://material.io/guidelines/patterns/errors.html#errors-user-input-errors

The height shouldn’t grow or shrink (causing a bounce) based on whether or not you have helper or error text. It should be a fixed 80 px high.

0reactions

rosskevincommented, Jul 6, 2017

Dense split to #7358

Top Results From Across the Web

[TextField] vertical height incorrect (visually comparing to spec)

Problem description Current normal vertical spacing is incorrect. This is especially apparent when vertically oriented with helper texts ...

Flutter wrong position of text in textfield after changing height

According to my design I have a TextField ...

UI cheat sheet: text fields - UX Collective

Comparison of horizontally and vertically aligned forms. Material Design's line text field (old) and filled text field (new) ; Filled text field ......

Deep dive CSS: font metrics, line-height and vertical-align

Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it...

A Sliding Nightmare: Understanding the Range Input

Using other units, the actual range input expands or shrinks vertically such that the track perfectly fits inside. The computed value we get...