matBadge changes position after content is updated

[domsew]

Reproduction

https://stackblitz.com/edit/angular-f2fovj

1. Wait 5 s, and see effect.

Expected Behavior

MatBadge should preserve its position after content is updated

Actual Behavior

MatBadge changes position after content is updated.

Environment

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

[domsew]

Ok, the solution for this problem is not to use matBadge with inline elements.

[guillaumebouhier]

Is it supposed to be fixed or is it a limitation ?
I have strange behaviors too using badges with h1, h2 tags. The badge is moved to the right end of the page.

Regards

[chathura90]

I found a hack for this issue
Use <mat-icon></mat-icon>
eg:
<mat-icon class="badge-icon" [matBadge]="data.responses?.length" matBadgePosition="above after" matBadgeOverlap="false" matBadgeSize="small" [matBadgeHidden]="data.responses.length < 1"></mat-icon>

[ctbolton]

You can also just add "display: inline-block;" to the inline element instead of using mat-icon around it.

[AdrianDC]

Also affected with an Angular 10 (CLI 10.2.0, Material 10.2.7) application using a mat-checkbox inside a table header cell.

Worked around through the mat-icon as such :

        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
             ...
-            [matBadgeColor]="items.length === 0 ? 'warn' : 'primary'"
-            [matBadge]="items.length"
           ></mat-checkbox>
+          <mat-icon
+            class="mat-checkbox-icon-badge"
+            [matBadgeColor]="items.length === 0 ? 'warn' : 'primary'"
+            [matBadge]="items.length"
+            matBadgePosition="above after"
+            matBadgeOverlap="true"
+          ></mat-icon>
         </th>

+.mat-checkbox-icon-badge {
+  height: 0px;
+  width: 0px;
+
+  .mat-badge-content {
+    right: -14px;
+    top: -25px;
+  }
+}

[blogcraft]

I use Font Awesome instead of Angular Icons and have the same issue. (I won't use Material Icons because they suck 😋)

[whisher]

Any news? :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}