Remove ion item divider

Question

How I can remove <ion-item> divider? I have the following code to show 4 items in a row:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
              <ion-item color="dark">
                  <ion-avatar item-left>
                      <img [src]="photo" class="img img-circle"/>
                  </ion-avatar>
                  {{user.name}}
              </ion-item>
              </ion-col>
            </ion-row>

and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.

I tried to set style="border:none" but it didn't do it.

show the image/screenshot.. Hard to understand... May be `ion-col, ion-row` has some css which is showing the border. — Atul Sharma, Dec 29 '16 at 08:57
Usually in grid systems there is padding in place to create "air" between the blocks. I think style="padding: 0" on your ion-col element should do the trick. But I think maybe you should rethink the use of ion-row and ion-cols here as it seems a little too complex for your needs. — Benedicte Raae, Dec 29 '16 at 09:09

Suraj Rao · Accepted Answer · 2018-08-01T05:14:16.010

67

use no-lines

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item no-lines color="dark"><!-- here -->
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
     </ion-col>
</ion-row>

edited Aug 01 '18 at 05:14

answered Dec 29 '16 at 09:09

Suraj Rao

28,186
10
88
94

6

Thanks @jegadeesh, adding `` solved my problem in Ionic5!! Cheers! – Bebbolin May 14 '20 at 21:40

score 52 · Answer 2 · edited Feb 08 '19 at 12:32

52

For whatever reason this didn't work for me. But having lines="none" worked great.

For ionic v4

<ion-item lines="none"> </ion-item>

Pulled from ionic docs... https://ionicframework.com/docs/api/list

edited Feb 08 '19 at 12:32

Suraj Rao

28,186
10
88
94

answered Jan 30 '19 at 05:37

Rmalmoe

817
9
11

1

This is for ionic v4 onwards. – Suraj Rao Feb 08 '19 at 12:31
4

Thanks Ionic for changing everything once again. – Dicer Mar 26 '19 at 04:32
This works in angular 8, the marked solution does not – ASomN Mar 31 '20 at 20:18

score 9 · Answer 3 · answered Apr 26 '19 at 14:59

For ionic v4, you should use the lines property:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item lines="none" color="dark">
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
    </ion-col>
</ion-row>

score 7 · Answer 4 · answered Dec 15 '19 at 05:14

7

Apply this for Ionic V4. Really it will work.. Happy coding

<ion-item lines="none">
</ion-item>

answered Dec 15 '19 at 05:14

Maksudul Hasan Raju

649
7
6

score 5 · Answer 5 · answered Jan 19 '20 at 18:35

5

If you want to disable the lines / borders globally on all of your <ion-item>'s, just add the following code to your src/global.scss (default when generating a Ionic v4 App with Angular) of your application.

ion-item {

    --border-width: 0;
    --inner-border-width: 0;
}

The attribute lines="none" on a <ion-item> does nothing other.

Hope it helps someone.

Cheers Unkn0wn0x

answered Jan 19 '20 at 18:35

Unkn0wn0x

557
5
11

Thx. I was looking for a global solution. – Tapas Mukherjee Mar 29 '20 at 09:47

score 3 · Answer 6 · answered Sep 18 '19 at 03:37

I tried with no-line but it didn't work in ionic 4

Only this work for me in ionic 4 :

<ion-item lines="none"> </ion-item>

<ion-list>
 <ion-item lines="none" button detail *ngFor="let note of notesService.notes">
      <ion-label>{{ note.title }}</ion-label>
    </ion-item>
</ion-list>

score 0 · Answer 7 · answered Apr 27 '20 at 14:40

I am on ionic 4, and lines="none" somethimes don't work. So I use this line.

ion-list:not(.list-lines-none) ion-item::before{
    border-width: 0 !important;
}

And this is my ionItem example. (It has hidden error property also)

<IonItem lines="none" detail={false}>
    <IonIcon
        className="w-40 h-40 float-left"
        src="/assets/icon/store-black.svg"
    />
    <IonLabel className="flex flex-col ml-10">
        <h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
        <span className="text-sm leading-tight">Kratki opis</span>
    </IonLabel>
    <IonIcon
        className=" absolute top-50 right-30 w-15 h-15"
        src="/assets/icon/arrow-right.svg"
    />
</IonItem>

score 0 · Answer 8 · answered Dec 23 '20 at 04:34

0

use (lines="none") in your ion-item

answered Dec 23 '20 at 04:34

Hariharan R

1

Remove ion item divider

8 Answers8

Linked