Angular Material Radio Button Label is ugly

  angular, angular-material

I don’t know why it actually looks so ugly and so different from the examples that are given by Angular Material.
enter image description here

The label is not on the same height as the buttons and the font size seems to differ.

I’ve also tried to use a mat-label now but it does not change anything.

HTML:

  <form [formGroup]="audioConfig" style="text-align: center;">
    <mat-label>{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGE" | translate }}</mat-label> 
    <mat-radio-group formControlName="radioButtonLanguage"
      class="example-radio-group">
      <mat-radio-button class="example-radio-button" [checked]="true" value="german">{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGES.GERMAN" | translate }}
      </mat-radio-button>
      <mat-radio-button class="example-radio-button" value="english">{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGES.ENGLISH" | translate }}
      </mat-radio-button>
    </mat-radio-group>
  </form>

In the examples, they are doing nothing different but still, it looks completely different (https://material.angular.io/components/radio/examples).

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.