Right Align ion-checkbox

ionic-v1
1

Hi guys

I’m trying to create an app that contains an ion-list and various components within it, I’ve got the following code so far:

    <ion-list>
		<p class="item item-icon-left" href="#">
		    <i class="icon ion-person-stalker"></i> Customer 1 - First Middle Last
		</p>
		<a class="item item-icon-left item-icon-right" href="#">
		    <i class="icon ion-clipboard"></i> Job Details
		    <i class="icon ion-chevron-right icon-accessory"></i>
		</a>
		<a class="item item-icon-left" href="#">
		    <i class="icon ion-ios-plus-outline"></i> Do you want to add an update?
		</a>
	</ion-list>

Which produces the following:

image

But what I’m trying to get is the checkbox next to “Do you want to add an update?” to appear on the right hand side, like so:

image

Any ideas on how to achieve this?

2

Hey Buddy… Any solution?

3

Unfortunately not, the app is still in development and I’ve simply replaced it with an ion-toggle - i will tackle it at a later stage

4

@andrew_milici

add this line in your css

input[type="checkbox"] {
    float: right;
}
5

For anyone running into the issue, there is the "item-checkbox-right" class to solve this. Its also important to mention the <ion-checkbox> directive creates an item class out of the box so usage is as a standalone item and not nested in another item.

<ion-checkbox class = "item-checkbox-right">Ahoy Mr Beaver!!</ion-checkbox>

1 Like
6

thanks buddy, I looked for some days until bumping into your answer.

7

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.

4 Likes