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.

[MDCTextField] Outlined label position incorrect with `mdc-text-field--fullwidth`

See original GitHub issue

Bug report

Outlined label position incorrect with mdc-text-field--fullwidth:

Steps to reproduce

   <div class="fields">
      <div class="author">
        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--fullwidth">
          <input class="mdc-text-field__input" id="text-field-hero-input">
          <div class="mdc-notched-outline">
            <div class="mdc-notched-outline__leading"></div>
            <div class="mdc-notched-outline__notch">
              <label for="text-field-hero-input" class="mdc-floating-label">Name</label>
            </div>
            <div class="mdc-notched-outline__trailing"></div>
          </div>
        </div>
      </div>
      <div>...The same div loop here</div>
   </div>

    .fields {
      width: 100%; /*parent is flex row layout*/
      height: 100%; /*100% of parent with a px fixed height*/
      background: tomato;
      display: -webkit-flex;
      display: flex;

      >* {
        width: 100%;
        height: 100%;
      }
    }

Actual behavior

Expected behavior

Label display in correct height/top/margin (whatever), whild mdc-text-field has a 100% width of parent.

Picture below, just remove the mdc-text-field--fullwidth class from the first field.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	4.0.0
Browser	Chrome 78.0.3904.108
Operating System	Windows 10

Additional context

Possible solution

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

mashirozxcommented, Dec 13, 2019

Thanks. I didn’t notice the notes on docs. Maybe this can be a feature requests in the future.🐕

1reaction

mashirozxcommented, Dec 13, 2019

Solution: add top:0 to .mdc-notched-outline

Top Results From Across the Web

Material-UI Outlined Input Label Incorrect Alignment

I'm having an issue with TextField labels and placeholder text rendering incorrectly with Material UI. I'm not sure why this is happening as ......

@material/menu-surface | Yarn - Package Manager

... touch-target: incorrect position in rtl when width is set (bd1b4e9) ... notched-outline: fix notched outline no-label style (99cfb6b); select: debounce ...

Text Field - Material Components for the Web

Full width text fields are useful for in-depth tasks or entering complex information. ... NOTE: Do not use mdc-text-field--outlined to style a full...

Stop using Material Design text fields! - Matsuko Friedland

Unfortunately, the label can't easily be highlighted because of its positioning, and because it may move around when trying to highlight it.

Text fields - Material Design

<label class="mdc-text-field mdc-text-field--filled"> ... To force alignment to the text field's container instead of its baseline, align the element using ...