CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
zakaria
zakaria

Reputation: 365

Label and group radio buttons horizontally aligned

I have a label and group radio button (two) and i want to make it to be horizontally aligned like in the picture.

enter image description here

I tried this code:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
        <ion-radio value="Mr"></ion-radio>
        <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

and also this code:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
      </ion-item>
      <ion-item>
        <ion-radio value="Mr"></ion-radio>
      </ion-item>
      <ion-item>
          <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

But i don't have the result that I want.

Upvotes: 11

Views: 15553

Answers (4)

m m
m m

Reputation: 1

<ion-radio-group value="biff">
 <table><tr>
  <td>
   <ion-item>
    <ion-label>Biff</ion-label>
    <ion-radio  value="biff"></ion-radio>
   </ion-item>
  </td>
  <td>
   <ion-item>
    <ion-label>Griff</ion-label>
    <ion-radio  value="griff"></ion-radio>
   </ion-item>
  </td></tr>
 </table>
 </ion-radio-group>

Upvotes: 0

Anjani Barnwal
Anjani Barnwal

Reputation: 1522

<ion-radio-group>
  <ion-row>
    <ion-col size="4">
      <ion-item>
        <ion-label>Site Visit</ion-label>
        <ion-radio value="site"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col size="4">
      <ion-item>
        <ion-label>Call</ion-label>
        <ion-radio value="call"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col size="4">
      <ion-item>
        <ion-label>Final Deal</ion-label>
        <ion-radio value="deal"></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-radio-group>

Upvotes: 0

Sams
Sams

Reputation: 11

<ion-row>
        <ion-label class="ion-label" color=dark>Save</ion-label>
      </ion-row>
      <ion-row radio-group [(ngModel)]="relationship" class="item">

            <ion-col>
                    <ion-radio value="manually" checked></ion-radio>
                    <ion-label>Manually</ion-label>
            </ion-col>

            <ion-col>
                    <ion-radio value="automatic"></ion-radio>
                    <ion-label>Automatically</ion-label>
            </ion-col>

    </ion-row>

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

You can use ion-row and ion-col elements for that. Please take a look at this working plunker.

  <ion-row radio-group [(ngModel)]="sexe">
    <ion-col>
      <ion-item>
        Sexe
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Homme</ion-label>
        <ion-radio value="homme"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Femme</ion-label>
        <ion-radio value="femme"></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

Since we use a single row and three columns, the title and the radio items will be placed all in the same row (horizontally aligned).

Upvotes: 21

Related Questions