Standard layout of ion-list radio-group

@Paepens wrote:

I have some formatting troubles

I have a basic form with:
* 1 basic text input
* 2 radio groups

But I'm not getting the layout 100% right:
* the label of the radio-group's is smaller (because it is a list header)
* spacing between header and radio items

Do you advice 1 big ion-list with sub ion-lists for the radio-groups?
Or what is the best for mixed forms (basic inputs & radio/checkbox lists)?

This is my result so far:

Inside a card: (there is a problem with the spacing after the last radio item in a list)

image.png468x513 9.54 KB

Without a card:

image.png432x560 9.07 KB

This is the html:

    <ion-list>
              <ion-item>
                <ion-label fixed>Name</ion-label>
                <ion-input type="text" name="name" id="name" [(ngModel)]="customer.name"></ion-input>
              </ion-item>
            </ion-list>
            <ion-list radio-group name="gender" id="gender" [(ngModel)]="customer.gender">
              <ion-list-header>Gender</ion-list-header>
              <ion-item>
                <ion-label>Male</ion-label>
                <ion-radio value="male"></ion-radio>
              </ion-item>
              <ion-item>
                <ion-label>Female</ion-label>
                <ion-radio value="female"></ion-radio>
              </ion-item>
            </ion-list>
            <ion-list radio-group name="gender2" id="gender2" [(ngModel)]="customer.gender2">
              <ion-list-header>Gender2</ion-list-header>
              <ion-item>
                <ion-label>Male</ion-label>
                <ion-radio value="male"></ion-radio>
              </ion-item>
              <ion-item>
                <ion-label>Female</ion-label>
                <ion-radio value="female"></ion-radio>
              </ion-item>
            </ion-list>

Thanks!

Posts: 1

Participants: 1

Read full topic