List directive does not support item-avatar and item-thumbnail

ionic-v1
1

I’m using the list and item directives because I want to use the handy behavior handling without having to write it myself. I need to use the Avatar style list (or Thumbnail) but the template and css classes applied by the directive don’t play well with the item-avatar or item-thumbnail item types. The result is in this Codepen: http://codepen.io/jfrench/pen/AChxH

It seems to be an issue related to having both item-complex and item-avatar on the same element. The styles don’t play well together and I don’t seem to be talented enough on the CSS side to work it out. :confused: Any tips?

UPDATE: It seems to be related to the .item-complex .item-content style. If I remove position: relative; from that rule then the item-avatar styles correctly but then the item does not hide the option buttons.

2 Likes
2

I’ve not seen the <item> directives used before. The demo code builds this all with regular html divs and links.

I forked yours just a bit and came up with this:

It looks nicer but doesn’t do swiping and stuff. Maybe play with it a bit to see if you can flesh out the other functionality using raw html with Ionic classes instead of directives.

3

Same issue here , with <item item-type="item item-avatar"> , it’s not working correctly

4

+1 - there’s a bug where the list item directives don’t style the item-avatar and item-thumbnails correctly.

5

For a work-around, you can just remove the item-type attribute from the list/item and add this custom class to the image itself:

.avatar {
    float: left;
    max-height: 40px;
    max-width: 40px;
    margin-right: 1em;
    border-radius: 4px;
}

Your needs may require editing that a bit, but you can get a similar effect, at least, until there’s a bug fix.

6

+1

ion-list component is not styled correctly. It get’s styled correctly if you only use css classes, but then the swiping of list items wont work, so the buttons stay hidden. I really need this feature :blush:

:trophy: To the guy that implements this

1 Like