CODEWITHSUNDEEP
cssradio-buttonmaterial-designangular8
Viveka
Viveka

Reputation: 185

Css to align the material design radio buttons

I am using mat-radio-buttons. My expected UI should be like,

file

With the following code,

     <mat-radio-group name="employeeType" formControlName="employeeType" fxLayout="row">
                   <mat-radio-button *ngFor="let type of employeeTypes" (change)="showFieldByEmployeeType($event)"
                       [value]="type.name">
                       {{ type.name}}</mat-radio-button>
               </mat-radio-group>

But I am getting,

file2

Is there any helpful CSS to make it look like the expected one?

Upvotes: 0

Views: 61

Answers (1)

9841pratik
9841pratik

Reputation: 195

Template 

 <mat-radio-group class="radio-parent" name="employeeType" 
formControlName="employeeType" 
fxLayout="row">
           <mat-radio-button class="radio-item" *ngFor="let type of employeeTypes" 
(change)="showFieldByEmployeeType($event)"
               [value]="type.name">
               {{ type.name}}</mat-radio-button>
       </mat-radio-group>

CSS

.radio-parent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.radio-item{
 flex: 1 0 21%;
  margin: 5px;
 }

It will not generate exact like structure, you have to play with values to get the desired structure.

Upvotes: 1

Related Questions