Alignment help for checkbox items within ion-list with ion-option-button

Codepen is…

I can’t figure out how to move the checkbox to the left of the text like a normal checkbox. Any help would be appreciated. Thanks.

@brandyshea Can you look into this and let me know if a fix is possible? If not, I’ll have to go another route. Thanks.

Do you mean move the checkbox to the right of the text? The checkbox is on the left by default in Ionic.

I meant move it to the left like the default. Right now it’s above the text. I’m having issues figuring it out because it’s inside of an ion-item and I’m not that good with css stuff.

Got it. :slight_smile: So something like this?

Or do you want the checkboxes visible when you swipe open an option?

That’s perfect. Thanks!

Just in case you checked too soon - I just updated the codepen to restructure the html so you don’t have to add custom css and it works. :smile:

I actually liked the old one because I was also contemplating of moving the info pop up to work by clicking on the text and checking off the item would be clicking on the checkbox itself. Can you put it back or fork another one? Thanks.

Ok added both ways to that Codepen, sorry!

For the custom css, the checkbox is covering the text.

I must have done something when I forked it. Yours works fine. Sorry.

Oh ok. I thought you meant that when you click on the text it was checking the box so I updated it to not do that. :smile:

I was going to have to figure that out so thanks for the fix.

1 Like