9

I am trying implement angular material badge in my menu list.

Is it possible to position the badge in the center of list item?

Official document says : "By default, the badge will be placed above after. The direction can be changed by defining the attribute matBadgePosition follow by above|below and before|after."

But I need exclude this above|below position option

enter image description here

Or at the least if it is possible to set visible the entire badge inside the list-item

Ante Ereš
  • 623
  • 4
  • 8
  • 24
  • You can add padding to the list item, so the badge is fully visible. But the badge itself only has the documented possibilities. Of course you still could write your own badge ... had the same issue and went with padding in one case and in another I added the number in text ( like "Notifications (4)" ). What I did not try was to manipulate the badge's position through css. – Fildor Aug 24 '18 at 13:55
  • @Fildor I tried with pading on mat-menu-item. That didn't help. Mat-menu-item has 2 child elements: mat-icon and h3(where is text notification and badge properties). If I add padding on h3 element I'm able to see badge, but my text is no longer in the middle vertically. – Ante Ereš Aug 24 '18 at 14:40
  • use :host ::ng-deep css selectors for mat-badge-content class – B.Habibzadeh May 06 '21 at 11:02

4 Answers4

10

Check this blitzy

Solved using CSS

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -3px;
}
dota2pro
  • 7,220
  • 7
  • 44
  • 79
4
mat-badge-medium.mat-badge-above .mat-badge-content {
  top: unset;
  right: unset;
}

Removes both top and right values set by material.

mounds
  • 1,303
  • 12
  • 11
1

If you want to style it from the own component.css file you can do:

:host ::ng-deep .mat-badge-content 
{
left: -4px !important;
top: 40px !important;
}
B.Habibzadeh
  • 490
  • 6
  • 10
0

I just create my custom css class like this:

.md-badge {
  position: absolute;
  top: 28px;
  right: 30px;
}

Then add class to component

mirxtrem apps
  • 59
  • 3