CODEWITHSUNDEEP
htmlcssangularjsionic2hybrid-mobile-app
hybrid Dev
hybrid Dev

Reputation: 529

ionic 2 scroll inside each div is not scrolling

I am working on ionic 2 project, where I have one screen with two separate grid views.

The first grid should have 40% height, so inside that 40% the entire grid should scroll.

And my second grid should be scrollable continuously without specifying height. It should scroll based on the size of the contents. This second grid is not like First grid. So here it will look like this :

 < ion-content >

<div>
first Grid view divs
</div>

<div>
Second Grid view divs
</div>

</ion-content>

So initially, my <ion-content> did not scroll fully at all. But when I gave some particular height for my both grid div. they're not scrolling at all. Here is my code

My full code :

<ion-content class="no-scroll" style="width: 100%;overflow-y: hidden;">

//First Grid code start here
<div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;height: 42%;">  
  <!--  // grid view code start below here -->
<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> 

<!--  // First grid view code end here -->

// second grid code here

  <div class="item item-body no-padding" scrollY="true" style="border-width: 0px !important;">  
  <!--  // grid view code start below here -->
<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>

// <!--  //second  grid view code end here -->

</ion-content >

Upvotes: 1

Views: 1284

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

I'm not sure if I fully understand the scenario, but you can use an ion-scroll for the first grid. That way we can use the 40% of the page height for it, and the rest for the other grid.

Please take a look at this plunker. This would be the result:

enter image description here

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-scroll style="width:100%;height:40%;" scrollY="true">

    <!-- First grid -->

  </ion-scroll>

  <!-- Second grid -->

</ion-content>

Upvotes: 2

Related Questions