I'm using angular material 2 (material.io) and i'm trying to put the label of the md-radio-button above of the radio itself, like this:

Radio Buttons

The Docs say you can easy set the position to after or before. I'm using flex-layout (github/angular/flex-layout) too.

Here is my code:

<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
  <md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>

If someone can help me, I'll be very greatful. Thanks!

I'm using angular material 2 (material.io) and i'm trying to put the label of the md-radio-button above of the radio itself, like this:

Radio Buttons

The Docs say you can easy set the position to after or before. I'm using flex-layout (github./angular/flex-layout) too.

Here is my code:

<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
  <md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>

If someone can help me, I'll be very greatful. Thanks!

• javascript
• angular
• flexbox
• angular-material2
• angular-flex-layout

Share Improve this question Follow edited Aug 22, 2017 at 20:32 Nehal 13.3k44 gold badges4646 silver badges5959 bronze badges asked Aug 22, 2017 at 18:30 Carlos RamartCarlos Ramart 1311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you look closer to the elements created by md-radio-group you will notice this:

<label class="mat-radio-label" for="md-radio-2-input">
    <div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <div class="mat-radio-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLLabelElement]"
             ng-reflect-centered="true" ng-reflect-disabled="false"></div>
    </div>
    <input class="mat-radio-input cdk-visually-hidden" type="radio" id="md-radio-2-input" name="md-radio-group-0">
    <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Option 2</div>
</label>

.mat-radio-label has this CSS:

.mat-radio-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
}

Which basically is telling us that is using Flexbox to align its direct children (the radio button and the label). The default flex-direction is row, hence omitted. You can change it to column. By adding flex-direction: column-reverse you will put the label above.

This worked for me

:host /deep/ .mat-radio-label {
  flex-direction: column-reverse;
  .mat-radio-label-content {
    padding: 0;
  }
}

Using "@angular/material": "^6.4.7"