I am implementing an . user interface for the firebase login. For that i am using angular material.

For easier input correction on the user side i want to implement mat-hints for the user to show an error whenever the user typed something that was not expected.

    <mat-card-subtitle>Log into your existing account</mat-card-subtitle>
      <h3 mat-subheader>Profile</h3>
        <mat-icon mat-list-icon>alternate_email</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput placeholder="Email" [(ngModel)]="email" [formControl]="emailFormControl"
            [errorStateMatcher]="matcher" />
          <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
            Please enter a valid email address
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
        <mat-icon mat-list-icon>security</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput #passwordtest type="password" placeholder="Password" [(ngModel)]="password" />
          <mat-hint align="end" *ngIf="passwordtest.value.length < 6">{{passwordtest.value.length}} / 6 or more</mat-hint>
    <button mat-button (click)="login(email, password)">Login</button>

However it seems that the mat-form-field with mat-hints and placeholders is not designed to work within an mat-list-item, because the result looks like this.

enter image description here

if i remove the mat-list-item (and the little icon in front of the mat-form-field) then the hints and placeholders are not overlapping.

enter image description here

As you can see, the result is not pretty as well because the subheader is misaligned with the form field. Additionally, i think that the first option (with the overlapping) looks better because of the little icons.

I'm wondering what my options are in this situation because i don't want to break the material design by adding additional margins or paddings. However, i guess that this is intended behaviour and that i am doing something wrong.

How can i design this user interface in a way that the input fields with hints and placeholders are not overlapping?


You can increase the height of .mat-list-item using !important like so:

.mat-list-item {
    height: 80px !important; /** experiment with height **/

A better way to do it would be to provide styling with higher specificity (i.e. add an extra class to each list-item with your styling).

.custom-class .mat-list-item {
    height: 80px;

The alternative is to add padding to the left of mat-form-field to match the padding of the header.

  • 1
    for all that dont want to figure out the value themselves you can use .mat-list-item { height: auto !important; } as well – Jens Apr 11 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.