I am facing a challenge in aligning the radio/checkboxes horizontally within different types of Angular Material form controls in a list. The list comprises mat-list-option, mat-checkbox, and mat-radio-button elements. I aim to have left-aligned labels with right-aligned checkboxes/radio buttons.
I attempted using fxLayouts "row" and "space-between" but couldn't achieve the desired alignment. I also experimented with CSS adjustments without success. Here is a StackBlitz demo: https://stackblitz.com/edit/material-6-kj87kz
<mat-selection-list>
<ng-container *ngFor="let text of texts">
<mat-list-option [checkboxPosition]="'after'">
{{ text }}
</mat-list-option>
<div style="padding: 0 16px">
<mat-checkbox *ngIf="isCheckbox" fxLayout="row" fxLayoutAlign="space-between center">
{{ text }}
</mat-checkbox>
<mat-radio-group *ngIf="isRadioGroup" fxLayout="column" fxLayoutAlign="space-between center">
<mat-radio-button *ngFor="let subText of subTexts" fxLayout="row" [labelPosition]="'before'">
{{ subText }}
</mat-radio-button>
</mat-radio-group>
</div>
</ng-container>
</mat-selection-list>
I have simplified the code by removing bindings, conditions, and actions. However, achieving proper alignment remains a challenge. This is the current layout:
The struggle continues in getting the controls aligned correctly. Can anyone suggest an effective approach to address this issue?
Explore the StackBlitz demo: https://stackblitz.com/edit/material-6-kj87kz