As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: https://i.sstatic.net/lxzc9.png
However, with my current code, the result I'm seeing is different from what I expected: https://i.sstatic.net/fkcWd.png
This snippet showcases the code I am working with:
<ion-list radio-group [(ngModel)]="flag1">
<ion-grid item-center style="border-style: none">
<ion-row item-center style="border-style: none">
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio color="dark" [value]="true"></ion-radio>
<ion-label class="radio-text">Si</ion-label>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="false"></ion-radio>
<ion-label item-center class="radio-text">No</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
In addition to the code snippet, here is a glimpse of the CSS styling utilized:
.radio-text {
font-size: 12px;
white-space: pre-line;
text-justify: auto;
display: inline-block;
}
I am also facing an issue with an unwanted black bar that won't disappear despite attempting to remove it by setting the border property to 0. If anyone has a solution for this problem, your assistance would be greatly appreciated!