CODEWITHSUNDEEP
htmlionic3
Mohd Saif khan
Mohd Saif khan

Reputation: 65

How to align two radio buttons horizontally in Ionic 3

I am trying to align two radio buttons in single row or horizontally in Ionic 3 as shown in below image.

enter image description here

html

<ion-item>
      <ion-row radio-group >
      <ion-col>
      <ion-item>
        Batch Medium
      </ion-item>
      </ion-col>
       <ion-col>
      <ion-item>
        <ion-label>English</ion-label>
        <ion-radio >English</ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Bilingual</ion-label>
        <ion-radio>Bilingual</ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>    
    </ion-item>

After trying this code I am getting blank screen.

Upvotes: 0

Views: 1544

Answers (2)

Meryan
Meryan

Reputation: 1473

That's like verbose ugly :)

Here is my take

  • The Looks

enter image description here

or

enter image description here

  • The HTML enter image description here

  • The CSS enter image description here

  • The code behind enter image description here enter image description here

There is more tweaking you can do like with flexbox

The least you invest in any framework the better :)

Enjoy!

Upvotes: 1

AtulParmar
AtulParmar

Reputation: 4570

Tryout like below code.

 <ion-row radio-group [(ngModel)]="batchmedium">
        <ion-col>
          <ion-item>
            Batch Medium*
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label> English </ion-label>
            <ion-radio value="English"></ion-radio>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
           <ion-label> Bilingual </ion-label>
            <ion-radio value="Bilingual"></ion-radio>
          </ion-item>
        </ion-col>
      </ion-row>

review this link for more details http://plnkr.co/edit/AdFPOUaufyFYXqBxNiGg?p=preview

Upvotes: 0

Related Questions