Ion-item + item-icon-right rendering bug?

ionic-v1
1

codepen here: http://codepen.io/RangerRick/full/VYyVeX/

As soon as you start to swipe the item to the left, the icon on the right shifts (if you swipe, you’ll notice it immediately moves under/on-top-of the date in the upper-right). I assume this is a bug and have opened an issue, but does anyone know how to fix/workaround this?

Thanks!

2

Well this was fun to mess around with. Here’s a workaround: http://codepen.io/anon/pen/RNxqJd?editors=110

The padding-right just needs to be added to item-content not the item itself, so I created a custom class .item-content-icon-right to fix it.

3

Ooh, nice, thanks! So here’s an interesting one. With your change, it works fine when it expands out, but now my icon pops up when closed again. I can’t reproduce this in chrome but it happens inside the iOS emulator. :astonished:

image
Screen Shot 2015-02-12 at 9.29.42 AM.PNG752×1380 121 KB

Ah, yup, happens in Safari too. sigh

4

Ah, I am able to see it. So I had to switch the Codepen to beta14 because it broke with the nightly. There is something going on with resizing. If you delete node elements and add them back it puts the icon in the right spot. Here is my attempt at a hack: http://codepen.io/anon/pen/YPezKe?editors=110

5

It looks like the only necessary change is the “position: relative” ? That large chunk of css is missing a dot on “icon” so it’s not triggering based on class or anything.

In my scss I’ve added:

.item-content-icon-right {
	padding-right: 0 !important;
	.item-content {
		padding-right: 54px;
		position: relative;
	}
}

…and everything seems to be working. Thanks!

6

Hahaaa, I must’ve removed the dot when I was messing around with it. I removed that css from the codepen. Glad it’s working now!