In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views.
The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area.
On the other hand, the second grid view should be continuously scrollable without a fixed height, adjusting based on the content size:
< ion-content >
<div>
Contents of the first grid view
</div>
<div>
Contents of the second grid view
</div>
</ion-content>Initially, neither <ion-content> was scrolling as intended. When I attempted to set specific heights for both grid divs, they no longer scrolled at all. Here is a snippet of my code:
Complete code example:
<ion-content class="no-scroll" style="width: 100%;overflow-y: hidden;">
// Code for the first grid starts here
<div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;height: 42%;">
<!-- Grid view elements begin below -->
<div class="row no-padding" *ngFor="let data of ResourceDetailData; let i = index">
<ng-container *ngIf="i % 2 === 0">
<div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
</div>
</ng-container>
</div>
</div>
<!-- End of first grid view code -->
// Code for the second grid view
<div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;">
<!-- Grid view elements begin below -->
<div class="row no-padding" *ngFor="let data of ResourceDetailData; let i = index">
<ng-container *ngIf="i % 2 === 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i].categoryname}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url() no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceDetailData[i+1].categoryname}}</span></div>
</div>
</ng-container>
</div>
</div>
</ion-content >