Scroll React

Ionic Framework
1

Trying to get scroll working in React with Ionic byt it wont work at all, no errors but list of cards i stuck.

class List extends Component<{ data: any }> {
  render() {
    const { data } = this.props;

    return (
      <IonApp>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Items</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          {
            data.map((item: any) => {
              return (
                <IonCard key={item.id}>
                  <IonCardHeader>
                    <IonCardSubtitle>{item.datetime}</IonCardSubtitle>
                    <IonCardTitle>{item.type}</IonCardTitle>
                  </IonCardHeader>
                  <IonCardContent>
                    {item.summary}
                  </IonCardContent>
                </IonCard>
              )
            })
          }
        </IonContent>
      </IonApp>
    );
  }
}

Any ideas?

2

Try wrapping your cards in <IonList> and see if that helps

3

Thanks for your suggestion but it does not change anything. Any other thought?

4 
<IonContent class="scroll-content">

Does this help?

5

I have the same issue with no luck.

6

Can you show some code?

I checked back in my repo to see what I did but I cant see at first glance. I have set a custom style on my card like this. See if that helps.

<IonCard key={item.id} style={{ zIndex: "1000" }}>
7

Try wrapping ur content first with IonPage

8

I don’t know if it was the correct way but I fix my issue the next way. I wrapped my tabs component into an IonToolbar and that into a IonFooter.

                    <IonToolbar>
                        <MainTabs></MainTabs>
                    </IonToolbar>
             </IonFooter>