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

@oudj001 wrote:

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>'

Posts: 2

Participants: 1

Read full topic