I am trying to create a Sign Up form in my ionic app below.
It includes a group of radio buttons with 2 options.
I am having trouble formatting the row that includes the radio group to match the others.
I’ve attached a screenshot of the existing behaviour below.
Can someone please tell me how I can get the background of the radio buttons to match the other rows (white)?
Also, I’m not sure if I’m putting the label for the radio-group in the correct place.
Please find my code below, thanks a lot in advance!
<ion-grid style="width: 75%">
<ion-label>Account Type:</ion-label>
<ion-row class="rowStyle">
<ion-radio-group>
<ion-row>
<ion-item>
<ion-label>Customer</ion-label>
<ion-radio value="customer"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Supplier</ion-label>
<ion-radio value="supplier"></ion-radio>
</ion-item>
</ion-row>
</ion-radio-group>
</ion-row>
<ion-row class="rowStyle">
<ion-icon name="person" color="secondary"></ion-icon>
<ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>
</ion-row>
<ion-row class="rowStyle">
<ion-icon name="mail" color="secondary"></ion-icon>
<ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>
</ion-row>
<ion-row class="rowStyle">
<ion-icon name="key" color="secondary"></ion-icon>
<ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>
</ion-row>
</ion-grid>
Here is the CSS:
ion-content {
--ion-background-color:#3dc2ff;
}
.logo {
font-size: 25vh;
margin-top: 40px;
margin-bottom: 20px;
}
h1, h6 {
color: white;
font-size: 1em;
background-color: danger
}
.rowStyle {
background-color: white;
padding-left: 10px;
border-radius: 30px;
margin-bottom: 10px;
ion-icon {
margin-top: 13px;
margin-right: 10px;
}
}