hello friends i want to develop scroll in scroll in vertical and horizontal both manner means main scroll is vertical and inside that horizontal block will be there my code is as below
page-horizontal {
.inner{
width: 2000px;
height: 100%;
ion-card{
display: table-cell;
border: solid 1px #ccc;
}
}
.outer{
width: 100%;
height: 100%;
ion-card{
display: inline-block;
border: solid 1px #ccc;
}
}
}
my html file
<ion-content>
<ion-scroll scrollY="true" style="width:100%; height: 100%">
<div class="outer">
<ion-card *ngFor="let item of mMainProductBlocks">
<h2>{{item.name}}</h2>
<ion-scroll scrollX="true" style="width:100%; height: 200px">
<div class="inner">
<ion-card *ngFor="let subitem of item.data">
<img src='{{subitem.image}}'>
</ion-card>
</div>
</ion-scroll>
</ion-card>
</div>
</ion-scroll>
</ion-content>
when i run above code i get below output refer SS
In above screenshots one vertical scroll which is block with title like "Latesst for you, Rebook Footwear ..etc" and inside that block which is horizontal but it is not come in horizontal manner so any idea how can i solve this?
