Customizing Ionic Checkbox


#1

Hello there,

By default the checkbox and label each comes in one single row (100% width of the screen for one label and checkbox). Then second comes in next line.

But I a want to take 3 check boxes in one single row. Example:- [ ] Blue [ ] Green [ ] Red.

Can anyone please help me out, how to change the alignment?
Thank you in advance.


#2

Hey Amrita,
Use div row and col class for making them inline


#3

Thanks Rahul for your reply.
I had tried previously the with row and col. The below code:

<div class="row">
<ion-list>
  <div class="col"><ion-checkbox ng-model="filter.blue">Red</ion-checkbox></div>
  <div class="col"><ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox></div>
  <div class="col"> <ion-checkbox ng-model="filter.pink">Pink</ion-checkbox></div>
  
</ion-list>
</div>

But still it doesn’t work. Do I need to change the CSS? If so, I am worried about multiple screen output.

Thanks.


#4

remove both ion-list and instead of col , use col-33