Ion-list with checkbox breaks when adding visible reorder button


#1

Hi all, I’m new to Ionic and trying to get my head around an issue with ion-list.

I’ve created a list with checkboxes next to each item, and it displays fine. I also want visible reorder icons on the right-hand side, but as soon as I add these, it breaks the layout of the checkboxes, making them move to the right and obscure the item text.

You can see what I mean here:

If you remove the ion-reorder-button then things display as expected.

Does anyone know how to fix this?

Thanks,

Pete


#2

Unfortunately, this issue can’t easily be resolved.

Ideally, you would use the ion-checkbox with this, but that too causes issues.

I do have an issue opened for this and hopefully this will be added soon.

For the time being though, you may way to re-think the UI :frowning:


#3

Hi Mike, thanks for the reply. Sorry to hear it’s not an easy fix! I think I’ll look into using custom styling within the items and just use Ionic for the list and reordering functionality. I’ll keep an eye on the issue as it would be good to use the default Ionic items.

Cheers,

Pete


Is there a way to show selected item when ionic modal pops up?