How to Align The Radio Buttons Horizontally in Angular Material

How to align the radio buttons horizontally in angular material?

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.

Horizontally aligning different types of material form control components

You have to utilize the ::ng-deep selector to change the css from the form checkbox and radio components. With a bit of flex and space-between, this is the result:

stackblitz

.mat-checkbox,
.mat-radio-group {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-checkbox-layout {
  display: flex;  
  width: 100%;
  justify-content: space-between;
}

:host ::ng-deep .mat-checkbox-label-before .mat-checkbox-inner-container {
  margin-right: 0;
}

.mat-radio-group {
  align-items: flex-start;
  flex-direction: column;
}

.mat-radio-button {
  width: 100%;
  height: 48px;

  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

Angular Material: Radio Button Alignment

You can use display: grid to achieve this:

.mat-radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

is all that you need. It will convert each radio group into three columns of 1 fragment. Read more about Grid Layout and grid-template-columns at MDN.

In case you have global styling enabled: be aware that you might need to use an additional CSS class, and not .mat-radio-group, so the styling won't be applied everywhere you use radio groups.

Here's a StackBlitz example to show above.

How to position Angular Material radio buttons at the left and the right of the screen?

You can try to use a flexbox and group two by two the buttons. Something like this:

CSS:

.mat-radio-group{
  display:flex ;
  width:100%;
  font-size:0.5em;
  justify-content: space-between;
}

HTML:

<mat-radio-group class="myGroup">
    <span class="group1">
       <mat-radio-button value="1">Option 1</mat-radio-button>
       <mat-radio-button value="2">Option 2</mat-radio-button>
    </span>
    <span class="group2">
       <mat-radio-button value="3">Option 3</mat-radio-button>
       <mat-radio-button value="4">Option 4</mat-radio-button>
     </span>
</mat-radio-group>

DEMO

---

You can customise mat-radio-button style as the following:

mat-radio-button:nth-child(3){
   float:right
}

mat-radio-button:nth-child(4){
   float:right
}

This will push options3&4 to the right and create a gap between two group of buttons.

DEMO

---

How to set vertical alignment for mdRadioButton directive of Angular Material related to text?

Angular Material actually generates a container for the radio button's on/off state and ripple.

<md-radio-button> is the parent and _md-container is the child element you want to modify.

Here's a fork of the plunker with the modified styles:

md-radio-button ._md-container {
    top: 0;
    transform: translateY(0);
}

Hope this helps!

Radio buttons Horizontal Alignment

Your css should be for Fieldgroup, not input type. Like so:

<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit   Card</label>
</div>
</fieldset>

.fieldgroup{
   float: left;
   width: auto;
   margin-left: 3em;
}

ANGULAR - How to center align mat-hint or label in div with radio-group - ANGULAR

Solved the align problem with the following code:

style="margin: auto;"

---

Related Topics