I attempted to modify the appearance of the radio button component using CSS in my code, but unfortunately, it does not seem to be effective.
The default setup for this component places the button on the left and the label on the right. I am interested in reversing this arrangement. My goal is to have the label on the left and the button positioned all the way to the right within its parent component.
In my xxx.component.html file, the radio component structure appears as follows:
<mat-radio-group
class="radio-group"
[(ngModel)]="model">
<mat-radio-button class="radio-button" *ngFor="let element of list" [value]="element.Id">
{{element.name}}
</mat-radio-button>
</mat-radio-group>
Upon inspecting the radio component in Chrome, this is the HTML structure:
<mat-radio-group class="mat-radio-group radio-group">
<mat-radio-button class="mat-radio-button radio-button">
<label class="mat-radio-label">
<div class="mat-radio-container">...</div>
<div class="mat-radio-label-content">...</div>
</label>
</mat-radio-button>
...
</mat-radio-group>
I attempted to change the styling of the class "mat-radio-container" by adding "left:100%!important", but the changes did not take effect. It appears that modifying subclasses directly is challenging. While I can alter the radio-group or radio-button classes I created, affecting elements like mat-radio-container or mat-radio-label-content proves more difficult.
All my attempts at modification were made in the xxx.component.scss file.
If anyone has insight into how I can position this button on the far right or manipulate the "subclasses" of this element solely within this component, your advice would be greatly appreciated.
Edit: My intention is to align the label with the left side of the parent div and the button with the right side of the parent div, rather than having the label on the left with the button close to it.