Ion-list no separating lines

1

Is there a way to prevent the separating lines between items in an ion-list? I am putting the item content in a card and it looks awkward with the list lines there as well, I want the items to look like they’re floating above… Thanks!

2

Hi @emilywhou,

Using following css. you can hide the separator.

.list a.item
{
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}

3 Likes
3

class=“item-borderless”

7 Likes
4

Works for me. thanks!

5

works for ionic creator, thanmks.

6

As per latest documentation: 2.0, no-lines works


    Item with no border
15 Likes
7

Thanks works fine in Ionic 2 :slight_smile:
Can you give me please the documentation link for this component?

8

Thanks… Worked for me.

9


this is the link for ion-item documentation, and look for no-lines

2 Likes
10

You’re right! :smile: thank you

11

hi , how to remove the line from the last item in a list ?

12 
.item { border-style: none }
3 Likes
13

Use no-lines Here is the example:

<ion-item no-lines >

Working perfectlyPreformatted text for me.
skydevelopers

4 Likes
14

For ion-list in ionic 4, use the attribute lines=“none” , this will remove the lines on ion-item elements

6 Likes