Geek Answers Handbook

Remove Ion Separator

How can I remove the separator <ion-item>? I have the following code to display 4 elements per line:

<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 per line, as excluded, but each image has a white separator below it. I do not want a divisor.

I tried to install style="border:none", but he did not.

+26
source share
4 answers

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>
+66
source

For some reason, this did not work for me. But having strings = "nobody" worked fine.

For ion v4

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

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

+29
source

ionic v4 lines:

<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>
+7

I tried without a line, but it did not work in ion 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>
+2
source

More articles:


All Articles