CODEWITHSUNDEEP
angularjsionic-framework
Mark B
Mark B

Reputation: 167

Ionic list is cut off at the bottom

I am displaying a normal list view getting data but the bottom is cut off.

In my css, I have: ]

.scroll { 
    height: 100% 
}

My HTML is:

 <ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
 <ion-item ng-repeat="category in categories | orderBy: 'id':true"
       href="#/category/{{category.id}}"
       class="item item-thumbnail-left catthumb list cat">
        <img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
        <span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-list>
</ion-content>

Here is the image:

enter image description here

Upvotes: 1

Views: 1856

Answers (2)

mastermind
mastermind

Reputation: 1057

This happen when we added another view level header or footer.

Simple solution is to add spacer div in the end of ur page with the height of ur page level header. For more info

Upvotes: 0

scottier
scottier

Reputation: 248

You're missing the closing ion-item tag. It should be:

<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
 <ion-item ng-repeat="category in categories | orderBy: 'id':true"
   href="#/category/{{category.id}}"
   class="item item-thumbnail-left catthumb list cat">
    <img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
        <span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
  </ion-item>
</ion-list>
</ion-content>

Upvotes: 1

Related Questions