<ion-content> inside <ion-nav-view> doesn't scroll to the bottom

ionic-v1
1

Hello everyone,

I’m an ionic beginner, and I’m facing a problem when working with different views.

Here is my layout :

  • The index.html page contains nothing else than a ion-nav-view :
    `
`
  • Then the main.html template file contains a header bar, and a named ion-nav-view :
    `

    myEntrepreneur

`
  • And finally, the html template that shows in the main-view :
    <ion-content> ... </ion-content>

My main-view is working fine, but there is just an issue with the scrolling of the ion-content.
When I scroll the page to the bottom, it will stop before the actual bottom of the content. And it seems that the scrolling difference is just the height of the header bar…

When I remove the “has-header” class on the ion-nav-view, I can scroll to the bottom correctly, but then the header bar is overlapping my content.

Do you know how to get rid of this issue please?

Thanks for your help,
Arnaud.

2

Self answer, for those who could be interested :smile:

  • The index.html page stays the same

  • In the main.html template file, I changed the <ion-nav-view> into <div ui-view>, and put it inside a <ion-content> tag :
    `

`

  • Then in the main-view html templates, I just directly write the content I want (here a padding div, for example) :
    `

    …
    `

    Hope it can help somebody.

    Arnaud

3

Have you tried to put your content inside <ion-scroll direction="y" >your content</ion-scroll>?