How do I stop leaving two radio buttons, side by side using Angular and IONIC 3

1

I am in doubt as to leave radio buttons next to another. Getting to do this normally, however I'm having problems because of the radio-group

            <ion-list radio-group>
            <ion-col>
                <ion-item>
                <ion-label>PF</ion-label>
                <ion-radio checked="true" (click)="selectIndividuo('1')"></ion-radio>
                </ion-item>
            </ion-col>

            <ion-col >
                <ion-item>
                <ion-label>PJ</ion-label>
                <ion-radio (click)="selectIndividuo('2')"></ion-radio>
                </ion-item>

            </ion-col>
            </ion-list>

        </ion-row>
    </ion-grid>
    
asked by anonymous 03.04.2018 / 22:20

1 answer

1

To put in horizontal remove ion-list and try:

  <ion-row radio-group>
    <ion-col>
      <ion-item>
        <ion-label>PF</ion-label>
        <ion-radio ></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>PJ</ion-label>
        <ion-radio></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

Example stackblitz

    
03.04.2018 / 23:01