List-inset class on ion-list

ionic-v1
1

Hi,

I’m trying to create an inset list using the JS list implementation:

<ion-list>
        <ion-item class="item-thumbnail-left">
            <img src="img/magallanes.jpg">
            <h2>Item 1</h2>
            <p>Description of Item 1</p>
        </ion-item>
</ion-list>

but when I add class="list-inset" to <ion-list>, I don’t get the same effect as the CSS implementation below:

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

</div>

The CSS implementation creates a padding at the left and right side of the list but the JS implementation doesn’t produce the same effect. Am I supposed to add padding for the JS version or is this a bug?

Thanks!

2

I just noticed the exact same thing, and was going to file a github issue about it, but considering I’m not the only one let’s see if there’s any discussion needed around this first.

3

And how do you Style <ion-list> and <ion-item>?
I try to add class with red background in style.css and apply it on <ion-list> and <ion-item> but doesn’t work. But it works on <li class="item">

4

I am also wondering how to use list-inset on <ion-list>.

My workaround is to place a <div class="list-inset> around my <ion-list></ion-list>

5

Just an FYI, I just ran into this as well. Looks to be still broken.

6

I know this topic is old but its the first topic listed (no pun intended) when you do a search for ion-list list-inset. To use the JS implementation use type,

<ion-list type="list-inset"></ion-list>

Here is the doc link, http://ionicframework.com/docs/api/directive/ionList/