Label for mat-form-field is overlapping with mat-icon in mat-tab.

simpleplayer commented 1 year ago

Is this a regression?

[X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

Label is overlapping with icon.

When using in 2nd Tab of Tabgroup, surrounded with a e.g. a div, p, ...
and
When using the the mat-form-field with appearance "outline" and an icon with matPrefix.

<div>
            <mat-form-field appearance="outline">
                <mat-label>Outline form field</mat-label>
                <input matInput placeholder="Placeholder">
                <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
                <mat-hint>Hint</mat-hint>
            </mat-form-field>
        </div>

Reproduction

Steps to reproduce:

add to app.module import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatTabsModule } from '@angular/material/tabs';

add to app.component

<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
<mat-tab label="First">
    <div>
        <mat-form-field appearance="outline">
            <mat-label>Outline form field</mat-label>
            <input matInput placeholder="Placeholder">
            <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
            <mat-hint>Hint</mat-hint>
        </mat-form-field>
    </div>
</mat-tab>
<mat-tab label="Second">
    <div>
        <mat-form-field appearance="outline">
            <mat-label>Outline form field</mat-label>
            <input matInput placeholder="Placeholder">
            <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
            <mat-hint>Hint</mat-hint>
        </mat-form-field>
    </div>
</mat-tab>
</mat-tab-group>#

for the input field in 2nd tab : label is overlapping with mat-icon
when inspecting the style, it seems the X transform is not correct

tabs

Expected Behavior

Label should have correct margin

Actual Behavior

Label is overlapping with mat-icon

Environment

Angular:15.0.0
CDK/Material:15.1.0
Browser(s):Chrome, Edge
Operating System (e.g. Windows, macOS, Ubuntu):Windows 10

trentprynn commented 1 year ago

+1, encountering this issue as well while upgrading to angular@15 (from angular@14), temporary workaround I found is using lazy-loaded tabs makes the form input prefix text render as expected

<mat-tab label="Example Tab">
    <ng-template matTabContent>
        <app-example-tab></app-example-tab>
    </ng-template>
</mat-tab>

shaylanger commented 1 year ago

👍 Still an issue. Encoutered during angular 15 upgrade as well.

the workaround that @trentprynn posted seems to get things to display correctly. Here is a stackblitz that reporudces the issue: https://stackblitz.com/edit/angular-b6q6sv-tyk3ag?file=src%2Fapp%2Fform-field-appearance-example.html,src%2Fapp%2Fform-field-appearance-example.ts

thomasErich135 commented 1 year ago

This problem persisting in Angular Material version: 15.2.2 with Angular 15.2.2

The solution that @trentprynn not working for me. I use ng-container with ngTemplateOutlet for render my ng-template:

<mat-tab-group>
    <mat-tab label="Controle">
        <ng-container *ngTemplateOutlet="tableControle"></ng-container>
    </mat-tab>
    <mat-tab label="Revisões">
        <ng-container *ngTemplateOutlet="tableRevisao"></ng-container>
    </mat-tab>
</mat-tab-group>

<ng-template matTabContent #tableControle>
    <!--  content -->
</ng-template>

<ng-template matTabContent #tableRevisao>
   <!--  content -->
</ng-template>

Nevac commented 1 year ago

As @thomasErich135 mentioned, the issue persists on Angular 15.2.2

Me and my team encountered the exact same issue described by OP. As @trentprynn suggested, lazy loading works. This workaround is not suitable for some cases in our application.

JanesH64 commented 1 year ago

+1

mte-bad commented 1 year ago

+1

spp125 commented 1 year ago

I also encountered a problem where the mat icon in a 'mat-form-filed' is overlapping with the 'mat-label', causing a visual issue.

Steps to reproduce

Add a 'mat-form-filed' to a card.
Place an icon as prefix within the 'mat-form-field'
Add a 'mat-label to the 'mat-form-field'.

marcus-coube commented 1 year ago

As @spp125 mentioned, the issue with the prefix icon persists on Angular 16.1.0 (material 16.1.3)....

Does anyone have a solution/workaround to this problem?

tdahlhoff commented 1 year ago

We are facing overlapping labels when using prefix icons in inputs with appearance outline. This happens even outside of tabs or cards. This only happens right after loading the page. When going forth and back using the normal angular routing the prefix icons/labels are displayed correct. I guess its something with const iconPrefixContainer = this._iconPrefixContainer?.nativeElement; const textPrefixContainer = this._textPrefixContainer?.nativeElement; const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0; const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0; in https://github.com/angular/components/blob/ccff68ccf69aff7a0b120819a6ceef7e8e2e7791/src/material/form-field/form-field.ts#L655 Still do not have any solution for it.

therrax commented 11 months ago

Is it fixed in latest version?

AzarielUr commented 11 months ago

Hello, still having the issue on version 16.2.7

userhv commented 10 months ago

Persists on Angular 17.0.2

e-karlsson commented 8 months ago

Same problem in 17.1.1. The lazy load seem to be a workaround for now.

kevindqc commented 6 months ago

For me, the problem was that the icon comes from the network and its size is not known until it is loaded.

So when the form field is rendered initially, it doesn't know that my icon is 24x24 since it's not loaded yet. So the code pointed out by @tdahlhoff would find the width of the icon container to be 0.

Then when you come back, things look good, because the image is already loaded and cached, so the size is already known.

My workaround for this was to hardcode the size of my icon in the CSS.

Arthi93 commented 4 months ago

Still an issue, using Angular 18 and Material 3, now only available solution seems to be removing the icons

daitro123 commented 4 months ago

I have the same issue in v17.3.10, though not in mat-tab but in mat-sidenav. The form is inside a component which is initialized programatically with ViewContainerRef and when the sidenav is closed, therefore outside of viewport, that's when icons overlap. When the sidenav is opened and the component with the form is created, it works fine. overlap