How to align the radio buttons horizontally in angular material?

Question

I was expecting a in-built directive or a tag for this but probably not according to their documentation.

This is the example.

<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>

<md-radio-group ng-model="data.group1">

  <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
  <md-radio-button value="Banana"> Banana </md-radio-button>
  <md-radio-button value="Mango">Mango</md-radio-button>

</md-radio-group>

score 136 · Accepted Answer · answered Oct 02 '15 at 14:56

You do not need to override any default CSS:

<md-radio-group layout="row">
  <md-radio-button value=0 class="md-primary">On</md-radio-button>
  <md-radio-button value=1> Off </md-radio-button>
</md-radio-group>

Just put in md-radio-group tag a layout="row" attribute.

score 8 · Answer 2 · edited Jul 20 '17 at 11:23

8

Better not override any existing class.

Use the directive ng-style and give value for display parameter.

<md-radio-group ng-model="selvalue">
  <md-radio-button value="A" class="md-primary" ng-style="{'display':'inline'}"> Apple</md-radio-button>
  <md-radio-button value="R" class="md-primary" ng-style="{'display':'inline'}"> Orange </md-radio-button>
</md-radio-group>

edited Jul 20 '17 at 11:23

Asqan

4,319
11
61
100

answered Aug 12 '15 at 11:56

Shyam Devasia

105
5

Works perfectly for Angular 5 (Material 2 v5.0). – FiringBlanks Jan 02 '18 at 07:34
To make it look little more accurate add ```md-radio-group[layout="row"] md-radio-button { margin: 10px; }``` – Raman Savitski Oct 30 '18 at 14:16

MSS · Answer 3 · 2020-08-04T09:46:11.870

If you use layout row and your radio group is in a row layout parent the text vertical aligin will break. The soulution is putting it in a empty wrapper element.

<div layout="row">
     ...
     <div>
        <md-radio-group ng-model="data.group1" aria-labelledby="favoriteFruit" layout="row">
          <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
          <md-radio-button value="Banana">Banana</md-radio-button>
          <md-radio-button value="Mango">Mango</md-radio-button>
        </md-radio-group>
     </div>
     ...
</div>

How to align the radio buttons horizontally in angular material?

3 Answers3

Linked