Standard layout of ion-list radio-group

Ionic Framework ionic-v3
1

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

Without a card:

image
image.png432×560 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!

1 Like