Cannot scroll

Ionic Framework
1

I am getting pretty frustrated. I’ve tried all attributes, and to no avail.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>My Navigation Bar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content >
<div class="categories">
  <ion-list *ngFor="let item of [].constructor(1000)">
    <h1>vsdf</h1>
  </ion-list>
</div>

</ion-content>

<ion-router-outlet id="main"></ion-router-outlet>

first time using ionic. even copy and pasting code directly from docs doesn’t behave.

2

1000 is a lot of items. Eventually, if you’re really going to be handling lists of that size, I would definitely suggest looking into virtual scroll.

That being said,

I’m curious which “docs” you’re referring to, because in the ion-list docs I see, the direct children of the <ion-list> are all <ion-item>, and not <h1>.

3

Why are you doing an ngFor on ion-list? you should do that on ion-item as per other post. You should be iterating items, not a list.

Pretty sure the doc does not encourage you to do that.

Next, I wonder if it works to have a ion-router-outlet next to ion-content. But that is just purely out of curiosity.