Right Align ion-checkbox

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:

		<p class="item item-icon-left" href="#">
		    <i class="icon ion-person-stalker"></i> Customer 1 - First Middle Last
		<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 class="item item-icon-left" href="#">
		    <i class="icon ion-ios-plus-outline"></i> Do you want to add an update?

Which produces the following:


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:


Any ideas on how to achieve this?

Hey Buddy… Any solution?

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


add this line in your css

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

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

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

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.