No-line seems to be default for my ion-lists

Ionic Framework ionic-v3
1

Despite no mention of no-line in my code, the ion-lists has no lines to separate them, and them seem slightly cropped as well.

Screenshot_20170822-141311
Screenshot_20170822-141311.png1440×2960 209 KB 

<ion-header>

  <ion-navbar>
    <ion-title>Min fangst</ion-title>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card>
    <ion-label *ngIf="!resolved">
      {{placeholderText}}
    </ion-label>
    <ion-list *ngIf="resolved && catches.length>0">
      <ion-item  *ngFor="let c of catches">

        <h2>
          {{c[1].getName()}}, {{c[0].getDateString()}}
        </h2>
        <p>
          {{c[0].getCatchId()}}, {{c[0].getSalmon().getLength()}} cm, {{c[0].getSalmon().getWeigth()}} g
        </p>
        
      </ion-item>
    </ion-list>
    <ion-label *ngIf="resolved && catches.length<1">
      Du har ikke registrert noen fangst
    </ion-label>

  </ion-card>

</ion-content>

Any solutions to this?
Thanks

2

Hi, @Gunnarkd
Could you try

<ion-content padding>
 <ion-label *ngIf="!resolved">
      {{placeholderText}}
    </ion-label>
<ion-list  *ngIf="resolved && catches.length>0>
  <ion-item  *ngFor="let c of catches"> 
        <h2>
          {{c[1].getName()}}, {{c[0].getDateString()}}
        </h2>
        <p>
          {{c[0].getCatchId()}}, {{c[0].getSalmon().getLength()}} cm, {{c[0].getSalmon().getWeigth()}} g
        </p>
  </ion-item>
<ion-label *ngIf="resolved && catches.length<1">
      Du har ikke registrert noen fangst
    </ion-label>
</ion-list>
</ion-content>

Don’t use ion-card with ion-list

Thanks

1 Like
3

Great! It fixed the line, but the items are still a little cropped as you see in the picture, first item

4

Hi, @Gunnarkd

Hope that will solved your issue i can’t see croped in the picture in first item

thanks

5

If you look closely at the first item, you can see that the 2 is cut off at the top.

I removed the padding from the ion-content, which solved the issue, it looks just as good.

Thanks again!