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

class=“item-borderless”


#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
  

#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


#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 }

#13

Use no-lines Here is the example:

<ion-item no-lines >

Working perfectlyPreformatted text for me.
skydevelopers


#14

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