CODEWITHSUNDEEP
javascriptcssangulartypescriptangular-material
Rpcoder
Rpcoder

Reputation: 281

Angular Material Design : Radio button group to be vertically aligned

Below is the angular material code i am using to display radio buttons :

<div>
    <mat-radio-group>
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

But this is displaying the radiobuttons horizontally. But i need them to be displayed vertically.

Upvotes: 20

Views: 23395

Answers (2)

CaffeinatedCod3r
CaffeinatedCod3r

Reputation: 882

Simply add a <br> tag after each <mat-radio-button>

Upvotes: 3

Akber Iqbal
Akber Iqbal

Reputation: 15031

You can use CSS to get this done, add a class to your mat-radio-group where you can use:

  • display: flex; flex-direction: column;
  • or display: grid;
  • or display: inline-grid;

relevant HTML:

<div>
    <mat-radio-group class="example-radio-group">
        <mat-radio-button value="1">Transcription</mat-radio-button>
        <mat-radio-button value="2">Summarization</mat-radio-button>
        <mat-radio-button value="3">Both</mat-radio-button>
    </mat-radio-group>
</div>

relevant CSS:

.example-radio-group {
  display: flex; flex-direction: column;
  /* display: inline-grid; */ 
  /* display: grid; */
  margin: 15px 0;
}

working stackblitz here

Upvotes: 29

Related Questions