CODEWITHSUNDEEP
angularangular-material
Jens
Jens

Reputation: 2702

mat-form-field in mat-list-item overlapping

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>
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
    <mat-card-subtitle>Log into your existing account</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-divider></mat-divider>
      <h3 mat-subheader>Profile</h3>
      <mat-list-item>
        <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>
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
          </mat-error>
        </mat-form-field>
      </mat-list-item>
      <mat-list-item>
        <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>
        </mat-form-field>
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button (click)="login(email, password)">Login</button>
  </mat-card-actions>
</mat-card>

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?

Upvotes: 3

Views: 8900

Answers (2)

Ishwara Bhat
Ishwara Bhat

Reputation: 194

<mat-list-item style="height:auto" *ngFor="let item of itemList"> ..

height:auto also worked for me. Without this, I observed overlapping texts. If auto works, it is better than fixing the pixel value.

Upvotes: 3

Matt
Matt

Reputation: 2213

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.

Upvotes: 3

Related Questions