Center text in angular material MatButtonToggle

Question

I'm trying to customize the MatButtonToggle but have difficulties centering the label :

The template :

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

The style :

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

How can I do that ?

Caffeine

Answer 1

add this:

.mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

to your styles.css file of your src folder.

and in you html remove the <div> :

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>ET</mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

DEMO

Friesian

Thank you, you saved me a headashe here – Caffeine

@FatemeFazli This works perfectly. Can you tell me why the .mat-button-toggle-label-content style needs to be in the top-level styles.css? Why does it not work if that is in the .css file at the component level? – Lap

@JasonPowell you're welcome, By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will not affect elements that are children of other components within your template. – Friesian

@JasonPowell Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components. – Friesian

@FatemeFazli I see. That actually helps to make sense of some other issue's I've had with styles mysteriously not getting applied. Thanks so much! – Lap

I have an issue with the vertical align of my label for a toggle button height: 64px. Any idea? – Attalanta

@LaurentBois you can try .mat-button-toggle { display: flex; flex-direction: column; justify-content: space-around; } see stackblitz.com/edit/angular-mat-toggle-npx4nc – Friesian

Answer 2

I think you should use ng-deep for this.

::ng-deep .mat-button-toggle-label-content{
  line-height: 0px;
  padding: 12px 10px 10px 10px;
}

The important flag is always a bad idea and is, in general, a "bad practice".

There is currently only a draft on how to replace ng-deep for more information about that here.

UPDATE

You could also try to create a global CSS file and be very specific to your use case and register it in your styles.css. With that, you can avoid the ng-deep and the !important flag. Just be mindful that this could overwrite different places.

More to that topic you can find here

Labelle

Still better than important. Additionally, you should read further. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools. – Labelle

Answer 3

There nothing to do with padding, the lable is not centered because of the button height.
to solve this just add the following lines to your style.css file.

.mat-button-toggle-button {
    height: 100% !important;
}
 

don't worry, it won't affect other mat-button-toggle in your code.

Junker