Ionic-framework: Make it possible to align checkbox to the right

[fredgalvao]

I was able to achieve this with very little code change on codepen, and I think it's quite a nice addition to the checkbox feature having item-checkbox-right and item-checkbox-left just like pretty much everything list-wise.

http://codepen.io/fredgalvao/pen/ctKwp

I could make a PR on the weekend if it's deemed necessary, but I think this is a pretty small change and could come into tomorrow's beta?
Looking forward to this.

[ajoslin]

I like it! Sorry we didn't get to this issue in time for beta.4. But there's always next Wednesday's beta!

A PR would be welcomed.

[111crb111]

seems like ionic change checkbox style and right side checkbox buggy now

[smorstabilini]

@111crb111 if you replace

<ion-item class="item-checkbox" ...

with

<ion-item class="item-checkbox-right" ...

it doesn't work.
But if you use instead of it does work. see fredgalvao' codepen.
Hope this helps

[ryandraper]

Just what I needed! Thanks @fredgalvao :)

[fredgalvao]

This is supposed to work out-of-the-box on ionic now, since @adamdbradley / @ajoslin brought the codepen into native ionic css. If it's not working, it's a regression of some sort and it should be fixed or looked into, I guess.

Anyways, you're welcome, @ryandraper !

[pablomaurer]

should be documented http://ionicframework.com/docs/components/#checkbox

[lucassch]

docs?

[segersrobbert]

Doesn't seem to be working in Ionic 2.0.0-beta.24 with an ion-checkbox inside an ion-item using @fredgalvao codepen style. Is there a syntax to make this work out-of-the-box in Ionic2 like ion-checkbox-right ?

[meicj]

I met the same problem, and found it works perfect by <ion-checkbox class="item-checkbox-right"> . Thanks a lot @fredgalvao @smorstabilini . Hope a doc on http://ionicframework.com/docs/components/#checkbox

[prosenjit-manna]

.item-checkbox-right {
  flex-direction: row-reverse;
}

<ion-item class="item-checkbox-right">

[rodneyjoyce]

I found this worked for me: https://ionicframework.com/docs/api/components/item/Item/

Use an "item-end"

Checkboxes, Radios and Toggles
Checkboxes are positioned in the same place as the item-start attribute. Radios and Toggles are positioned in the same place as the item-end attribute. All of these components can be positioned differently by adding the item-start or item-end attribute.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.