CODEWITHSUNDEEP
htmlangularjsionic-frameworkhybrid-mobile-app
guagay_wk
guagay_wk

Reputation: 28090

ionic app cannot fully scroll down when ion-scroll height is too high

I encountered this strange problem with an ionic app. The ionic app cannot fully scroll down. For example, I may have a table with 100 rows. I can at most scroll down to the 80th row. Here is the relevant html code.

<ion-content>
    <ion-scroll zooming="true" direction="xy" style="height:700px">
      <table ng-table="tableParams" style="width:600px">
        <!-- table contents -->
      </table>
    </ion-scroll>
</ion-content>

I later discovered the solution but I do not know why it works. The solution is to lower the height from 700px to 500px. <ion-scroll zooming="true" direction="xy" style="height:500px">

I have no idea why it works. Can someone explain?

EDIT: One of the answers mentioned that the problem was that height was specified in absolute terms. How can I specify the height such that it can work on mobile devices of different heights?

Upvotes: 2

Views: 829

Answers (3)

Paradise
Paradise

Reputation: 578

Try something like: height: 33vh;

Upvotes: 0

sandeep pandharpure
sandeep pandharpure

Reputation: 39

remove the inline style height for that container cause below 700px it will not visible view your webpage on screen

Upvotes: 2

Mat Taylor
Mat Taylor

Reputation: 191

You are using absolute pixel heights for your containers. If the device is not at least 700 pixels high you will cut off the bottom of the scroll container.

Upvotes: 2

Related Questions