Ion-scroll combinating with ion-list and ion-items doesnt fit in ion-content

ionic-v1
1

Hi Guys,

I’m using the tabbed slide box in combination with the ion-scroll and ion-list directives.
Everything works well but my last ion-item in my list doesn’t fit in the screen. It misses like 30px at the bottom.
I think this is because of my subheader (the tabbed slidebox).

Also i miss the ‘pulling’-effect while scrolling to the top and bottom…

Has anyone an idea how i could fix this?
Thanks in advance…

<ion-content class="has-header" class="scroll-content ionic-scroll"> <ion-slide-box slide-tabs-scrollable="false" show-pager="false" ion-slide-tabs> <ion-slide ng-href="#/main/uitgelicht" ion-slide-tab-label="Uitgelicht"> <ion-scroll style="height:100%;"> <ion-list style="height:auto;"> <ion-item class="product" collection-repeat="product in uitgelichtPlanning.products" item-height="165px" href="#/product/{{product.id}}"> <div class="product-item"> <div class="product-text"> <div class="product-title"> <p>{{ product.title }}</p> </div> <div class="product-price"> <p>voor <span class="price">&euro; {{ product.for_price }}</span></p> </div> </div> <div class="product-image"> <div ng-if="product.discount < 100" class="product-discount">- {{ product.discount }}%</div> <div ng-if="product.discount == 100" class="product-free">Gratis</div> <img src="{{ product.primaryImage.url }}"/> </div> </div> <div class="bottom-product"></div> </ion-item> </ion-list> </ion-scroll> </ion-slide> <ion-slide ng-href="#/main/categorieen" ion-slide-tab-label="Categorieën" delegate-handle="slide1Scroll"> <ion-scroll style="height:100%"> <ion-list> <ion-item class="category" back-img="{{ category.bg }}" ng-repeat="category in categories" category="category" href="#/category/{{ category.id }}"> <div class="category-title">{{category.title}}</div> </ion-item> </ion-list> </ion-scroll> </ion-slide> <ion-slide ng-href="#/main/outlet" ion-slide-tab-label="Outlet"> <ion-scroll style="height:100%"> <ion-list> <ion-item class="product" collection-repeat="product in outletPlanning.products" item-height="165px" href="#/product/{{product.id}}"> <div class="product-item"> <div class="product-text"> <div class="product-title"> <p>{{ product.title }}</p> </div> <div class="product-price"> <p>voor <span class="price">&euro; {{ product.for_price }}</span></p> </div> </div> <div class="product-image"> <div ng-if="product.discount < 100" class="product-discount">- {{ product.discount }}%</div> <div ng-if="product.discount == 100" class="product-free">Gratis</div> <img src="{{ product.primaryImage.url }}"/> </div> </div> <div class="bottom-product"></div> </ion-item> </ion-list> </ion-scroll> </ion-slide> </ion-slide-box> </ion-content>'

2

Does anyone have an idea? :slight_smile: Thanks!

3

Did you find a solution to this? I am facing a similar issue.

4

Hi polska,

Yes i did!

I used the following code to get it working:

> <ion-slide-box slide-tabs-scrollable="false" show-pager="false" ion-slide-tabs>
>     <ion-slide>
>         <ion-content class="has-header has-subheader" has-bouncing="true">
>             <ion-list style="height:auto;">

the has-subheader and has-bouncing=“true” did the trick, hope it helps you.

Good luck!