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 + Icon] Leading icon has incorrect padding

See original GitHub issue

Bug report

Steps to reproduce

Taken from discord For icon button necessary to use mdc-text-field__icon–trailing.margin-right: 4px; Stille like this for prefix and suffix

/* TEXTFIELD PREFIX SUFFIX */
.mdc-text-field__affix--prefix {
    padding-right: 4px;
}
.mdc-text-field__affix--suffix {
    padding-left: 4px;
}

And

Final code

/* TEXTFIELD HELPER LINE */
.mdc-text-field+.mdc-text-field-helper-line {
    justify-content: left;
    padding: 0 14px;
}

/* TEXTFIELD ICONS */

.mdc-text-field {
    .mdc-icon-button {
        @include icon-button.size(44px);
    }
}

.mdc-text-field__icon--leading,
.mdc-text-field__icon--trailing {
    padding: 10px;
}

.mdc-text-field__icon--leading {
    margin: 0 4px;
}

.mdc-text-field__icon--trailing {
    margin: 0 4px;
}

.mdc-text-field--with-leading-icon {
    &.mdc-text-field--filled {
        .mdc-floating-label {
            left: 52px;
        }
    }
}

/* TEXTFIELD PREFIX SUFFIX */
.mdc-text-field__affix--prefix {
    padding-right: 4px;
}
.mdc-text-field__affix--suffix {
    padding-left: 4px;
}

Actual behavior

Expected behavior

Screenshots

Your Environment:

Software	Version(s)
MDC Web	8.0.0
Browser	Opera/Chrome
Operating System	Windows

Additional context

Possible solution

Issue Analytics

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

Top GitHub Comments

1reaction

youra-hcommented, Nov 15, 2020

/* TEXTFIELD */
.mdc-text-field-helper-line,
.mdc-text-field {
    --padding-text-field: 14px;
}

.mdc-text-field {
    padding: 0 var(--padding-text-field, 16px);
}

/* TEXTFIELD LABEL */
.mdc-text-field--filled {
    .mdc-floating-label {
        left: var(--padding-text-field, 16px);
    }
}


/* TEXTFIELD HELPER LINE */
.mdc-text-field+.mdc-text-field-helper-line {
    justify-content: left;
    padding: 0 var(--padding-text-field, 16px);
}

/* TEXTFIELD ICONS */

.mdc-text-field--with-trailing-icon {
    padding-left: var(--padding-text-field, 16px);
    padding-right: 0;
}

.mdc-text-field--with-leading-icon {
    padding-right: var(--padding-text-field, 16px);
    padding-left: 0;
    &.mdc-text-field--filled {
        // GOTO here you have to calc
        .mdc-floating-label {
            left: 50px;
        }
    }
}

// GOTO here you have to calc
.mdc-text-field {
    .mdc-icon-button {
        @include icon-button.size(44px);
    }
}

.mdc-text-field__icon--leading,
.mdc-text-field__icon--trailing {
    padding: 10px;
}

.mdc-text-field__icon--leading {
    margin: 0 2px 0 4px;
}

.mdc-text-field__icon--trailing {
    margin: 0 4px 0 2px;
}

/* TEXTFIELD PREFIX SUFFIX */
.mdc-text-field__affix--prefix {
    padding-right: 4px;
}
.mdc-text-field__affix--suffix {
    padding-left: 4px;
}

0reactions

wouterSkeppcommented, Dec 3, 2020

The leading icon does not have a 48x48 touch target while the trailing icon does, due to it using margin instead of padding.

I’d like to chime in that the *icon–leading and *icon–trailing do not have a 48x48px touch target - It is a side-effect of using material-icon. If one would swap out the iconset for font-awesome (for example), it is not enforced, offsetting the floating label.

I would suggest adding the sizing to the relevant .mdc-text-field__icon This floating-label offset is also happening in the select component with .mdc-select__icon.

Top Results From Across the Web

remove default padding on jetpack compose textfield

If you wish to disable it, an alternative could be to set the height of the TextField explicitly, and matching it with the...

Validation · Bootstrap v5.0

When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls. Custom feedback styles apply custom colors, borders,...

androidx.compose.material - Android Developers

Represents the colors of the input text, background and content (including label, placeholder, leading and trailing icons) used in a text field in...

TextInput - Mantine

TextInput · Usage · Controlled · Invalid state and error · Disabled state · With icon · With right section · Get input...

<input type="search"> - HTML: HyperText Markup Language

The first thing to note is that some browsers show a cross icon that can ... input:invalid ~ span::after { content: "✖"; padding-left:...