Ion-list no divider lines are shown

Ionic Framework ionic-v3
1

According to the docu “By default, all lists will be styled with divider lines”.
But in my case the web browser does not show any lines.

{{ item }}

Please help!

2

maybe it the pixel problem , try to install to your phone

3

You are supposed to post code too while asking questions, in this instance your the template code can be useful to understand your problem.

4 
<ion-header>
  <ion-navbar>
    <ion-title>{{ 'TASKS' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
    </button>
  </ion-list>

</ion-content>
5

You didn’t follow the docs correctly did you? Where is your <ion-item> tag?? BTW, {{ item }} is just a part of the bound variable and is not an item if you are thinking like that.

1 Like
6

I add the tag too, but it doesn’t matter.

7

Show the code please.

8 
<ion-header>
  <ion-navbar>
    <ion-title>{{ 'TODOs' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
      <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
       <ion-item>{{ item }}</ion-item>
      </button>
    </ion-list>
  </ion-content>

But here is an example of the demo:


Perhaps it didn’t work because of the pixel problem, I test it on the desktop browser.

9

I am sorry I missed the ion-item in the button tag, been absent minded I guess :smiley: Your code seems to be fine in the first place. I’ll check it out later, gtg for now.

BTW, please post the full template file code in the mean while. Catchya!

10 
<ion-header>
  <ion-navbar>
    <ion-title>Tasks</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
      <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
       {{ item }}
      </button>
    </ion-list>
</ion-content>


import {Component} from '@angular/core';
import { List } from 'ionic-angular';


@Component({
  selector: 'page-tasks',
  templateUrl: 'tasks.html'
})

export class TasksPage {

  items = ['Aufgabe 1','Aufgabe 2'];

  constructor(private alertCtrl: AlertController,
              private translate: TranslateService){

  }
  public itemSelected(){
    console.log("selected")
  }
}
11

You only have two items, so there should only be one line between them.

12

yeah, I supoose that the line will be shown between the lines, but it isn’t, see here.
tasks

13

Hey whats the incomplete grid doing there?

14

If removing that erroneous grid tag didn’t help then I’d suspect there are some version incompatibilities, ionic info output might be helpful. Another thing I’d like to know is on which platform are you trying this? Because windows doesn’t show the lines by default I think.

15

I use Windows.

Cordova CLI: Not installed
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.10.1
Xcode version: Not installed

16

Too old, please update!