ionic-frameworkionic2divider

Remove ion item divider


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.


Solution

  • This is for ionic 2 and 3. Please refer to this answer for higher versions of ionic

    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>