CODEWITHSUNDEEP
htmlcssangular-material
Cole Perry
Cole Perry

Reputation: 160

Aligning text beside a material radio button

I need to align some text to the right of a material-radio-button in an Angular app. Right now it is appearing like this:

enter image description here

And here's the code:

    <div class="question">
      <div class="row">
        <h5 class="app">Cerner Clairvia</h5>
      </div>
      <mat-radio-group class="radio-group row" [(ngModel)]="cernerValue">
        <mat-radio-button #cerner1 class="radio-item col-md-2" value="Charge RN" (click)="onRadioClick(8, $event, cerner1)">Charge RN</mat-radio-button>
        <mat-radio-button #cerner2 class="radio-item col-md-2" value="POE" (click)="onRadioClick(8, $event, cerner2)">POE</mat-radio-button>
        <mat-radio-button #cerner3 class="radio-item col-md-2" value="View Only" (click)="onRadioClick(8, $event, cerner3)">View Only</mat-radio-button>
        <mat-radio-button #cerner4 class="radio-item col-md-2" value="Administration" (click)="onRadioClick(8, $event, cerner4)">Administration <p class="required">(Supervisor, Manager, Director)</p></mat-radio-button>
      </mat-radio-group>
      <input #clairviaLocation type="text" class="form-control col-md-4" id="clairviaLocation" name="clairviaLocation" placeholder="Enter location..." (keyup)="onTextChange(8, clairviaLocation.value)"/>
    </div>

Specifically the line

<mat-radio-button #cerner4 class="radio-item col-md-2" value="Administration" (click)="onRadioClick(8, $event, cerner4)">Administration <p class="required">(Supervisor, Manager, Director)</p></mat-radio-button>

CSS

.radio-group{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.radio-item{
  margin-bottom: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.required {
  color: red;
  font-weight: bold;
  font-style: italic;
}

No matter how I try to do this I can't get the red text to cleanly align to the right of "Administration".

How can I achieve this?

Upvotes: 0

Views: 979

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3140

You can use ng-deep to access mat-radio-label-content class which will allow you to align the content using CSS without changing the HTML structure

::ng-deep.mat-radio-label .mat-radio-label-content{
  display: flex;
  align-items: center;
}

.mat-radio-button p{
  margin: 0;
}

Upvotes: 1

Related Questions