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 ?

Fateme Fazli · Accepted Answer · 2018-10-02T13:14:21.320

6

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

edited Oct 02 '18 at 13:14

answered Oct 02 '18 at 13:08

Fateme Fazli

11,582
2
31
48

1

Thank you, you saved me a headashe here – An-droid Oct 02 '18 at 15:59
@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? – Jason Powell Feb 09 '19 at 20:38
2

@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. – Fateme Fazli Feb 09 '19 at 21:11
2

@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. – Fateme Fazli Feb 09 '19 at 21:11
@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! – Jason Powell Feb 09 '19 at 23:42
I have an issue with the vertical align of my label for a toggle button height: 64px. Any idea? – Laurent Bois Mar 07 '19 at 14:20
@LaurentBois you can try ```.mat-button-toggle { display: flex; flex-direction: column; justify-content: space-around; }``` see https://stackblitz.com/edit/angular-mat-toggle-npx4nc – Fateme Fazli Mar 08 '19 at 08:51

Max Weber · Answer 2 · 2019-09-09T23:29:19.417

5

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.

Center text in angular material MatButtonToggle

3 Answers3

UPDATE