radio buttons inline

This commit is contained in:
annampak 2018-02-09 13:38:03 +02:00
parent ba8e64c3d6
commit 9558be7e1d
3 changed files with 3 additions and 8 deletions

View File

@ -1,6 +1,6 @@
<div [formGroup]="form"> <div [formGroup]="form">
<mat-radio-group formControlName="value" [required]="field.validationRequired"> <mat-radio-group formControlName="value" [required]="field.validationRequired" style="display:inline-flex">
<mat-radio-button name="{{field.id}}" value="true">Yes</mat-radio-button> <mat-radio-button style="margin-right:15px;" name="{{field.id}}" value="true">Yes</mat-radio-button>
<br> <br>
<mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button> <mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
</mat-radio-group> </mat-radio-group>

View File

@ -1,11 +1,6 @@
.radio-label { .radio-label {
margin-left: 10px; margin-left: 10px;
} }
.inline-radio{
display: inline-flex;
flex-direction: row;
}
.mat-radio-group .mat-radio-inline { .mat-radio-group .mat-radio-inline {
display: flex; display: flex;
} }

View File

@ -1,5 +1,5 @@
<div [formGroup]="form"> <div [formGroup]="form">
<mat-radio-group formControlName="value" [required]="field.validationRequired" class= "mat-radio-inline"> <mat-radio-group formControlName="value" [required]="field.validationRequired" style="display:inline-flex">
<div *ngFor="let option of this.field.data.options let index = index"> <div *ngFor="let option of this.field.data.options let index = index">
<mat-radio-button class="radio-button" [value]="option.value" >{{option.label}}</mat-radio-button> <mat-radio-button class="radio-button" [value]="option.value" >{{option.label}}</mat-radio-button>
</div> </div>