In list, badge + right button gets overlapped

1

Checkout this pen: http://codepen.io/anon/pen/BsAek

It’s a list of items with both button and badge: they get overlapped.

Is this a bug or am I doing something wrong?

2

Thanks for posting a CodePen when you asked for help!

Here’s a quick fix for it : http://codepen.io/calendee/pen/Iypbj

However, I’m not sure it’s a bug. I think it’s because you mixed button right with lists. It really should be icon-right. See the bottom of my list. You’ll see an icon only. If you remove my CSS class, all of your list items will break, but the icon one displays fine.

3

Actually not all icons will display fine with only icon-right: large icons will partially overlap badge.

Checkout: http://codepen.io/anon/pen/ekaov

(Yes, I just realized that codepen is useful and awesome!)

4

Good points. I’ve opened Issue # 826 : https://github.com/driftyco/ionic/issues/826

1 Like
5

Okay so Adam has made a few updates.

However, as he notes, depending on what you put in a list item, it could be impossible to know exactly where they belong. So, you can adjust position similar to my first CodePen sample.

6

Okay, I got it.
Thank you for the help!