I am facing an issue with the alignment of my radio buttons. The text appears too far away from the radio button and I want to bring it closer.
Below is my code snippet:
ion-row radio-group (ionChange)="onChange($event)">
<ion-col width-30>
<ion-item>
<ion-label>Yes</ion-label>
<ion-radio value='{{checklists.controls["yesradio"].value}}-yes'> </ion-radio>
</ion-item>
</ion-col>
<ion-col width-30>
<ion-item style="text-align:left">
<ion-label>No</ion-label>
<ion-radio style="margin:0px;" value='{{checklists.controls["yesradio"].value}}-no'></ion-radio>
</ion-item>
</ion-col>
</ion-row>
The current layout looks like this https://i.sstatic.net/kgHq3.png
In the image above, you can see that the 'Yes' text is positioned quite far from the radio button for 'Yes'.
My goal is to achieve a layout similar to https://i.sstatic.net/nYYka.png
I also attempted to tweak the code by adding:
<ion-col width-30>
<ion-item style="text-align:left">
<ion-label style="margin:0px;">No</ion-label>
<ion-radio style="margin:0px;" id="no_radio"></ion-radio> //added margin 0px fails
</ion-item>
</ion-col>
What additional changes can be made to ensure the text ('Yes' and 'No') align closely with the respective icons?