CODEWITHSUNDEEP
angularangular-material
B. Raynaud
B. Raynaud

Reputation: 43

Angular Material: Radio Button Alignment

I have the following HTML that looks something like this.

<mat-radio-group aria-label="Select an option">
    <mat-radio-button>Sample 1</mat-radio-button>
    <mat-radio-button>Sample 2</mat-radio-button>
    <mat-radio-button>Unknown Sample</mat-radio-button>
</mat-radio-group>
<mat-radio-group aria-label="Select an option">
    <mat-radio-button>Yes</mat-radio-button>
    <mat-radio-button>No</mat-radio-button>
    <mat-radio-button>Unknown</mat-radio-button>
</mat-radio-group>

The radio buttons look like this:

Radio Buttons

I would like to modify the CSS so that the buttons of the two different groups line up vertically but I am stumped as to how I can make that happen.

Any advice would be appreciated!

What i'm trying to achieve

This is what I want it to look like. Is there any way to do this without adding whitespace manually?

Upvotes: 1

Views: 2703

Answers (1)

Roy
Roy

Reputation: 8069

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.

Using display grid to show mat-radio-group

Here's a StackBlitz example to show above.

Upvotes: 2

Related Questions