i create a page with many element.
this is my structure
<!--
Generated template for the Townsdetails page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{item.name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<img src="http://www.cinemairis.it/wp-content/uploads/partners/{{item.id}}.jpg">
<ion-grid id="category">
<div class="title">
<h6>{{item.categories}}</h6>
</div>
</ion-grid>
<ion-row class="icon-menu">
<ion-col width-25>
<a href="tel:{{item.tel}}">
<i class="fa fa-phone" aria-hidden="true"></i>
</a>
</ion-col>
<ion-col width-25>
<a href="tel:+393314042263">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</ion-col>
<ion-col width-25>
<i class="fa fa-location-arrow" aria-hidden="true" (click)="scrollTo('section-map')"></i>
</ion-col>
<ion-col width-25>
<i class="fa fa-tripadvisor" aria-hidden="true" (click)="scrollTo('section-tripadvisor')"></i>
</ion-col>
</ion-row>
<ion-grid>
<div class="period">
<h6>Description</h6>
</div>
<ion-row>
<ion-col>
<p class="town-desc" [innerHTML]="item.desc"></p>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<div>
</div>
<div class="period">
<h6>Events in {{item.name}}</h6>
</div>
<ion-list>
<ion-item *ngFor="let item of items" (click)="itemClicked($event, item)" [ngStyle]="{'background-image': 'url(' + item.cover.source + ')'}">
<div class="item-container ">
<div class="date-town">
<span>{{item.data_inizio}}</span>
<span>{{item.place.city}}</span>
</div>
<div class="title ">
<h3>{{item.name}}</h3>
</div>
<div class="place ">
<h4>{{item.place.name}}</h4>
</div>
<div class="category">
<span>{{item.category}}</span>
</div>
</div>
</ion-item>
</ion-list>
<ion-row *ngIf="total===false" class="today-container">
<ion-col>
No Scheduled Event in <br> <span>{{item.name}}</span>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid id="section-map">
<div class="period">
<h6>Map</h6>
</div>
<ion-row>
<ion-col no-padding class="center">
<h6>
<ion-icon name="navigate"></ion-icon>
{{item.address}}
</h6>
<div #map id="map" class="map-div"></div>
<h6 (click)="openMapsApp(item)">
<ion-icon name="pin"></ion-icon>
Open maps app
</h6>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid id="section-tripadvisor">
<div class="period" *ngIf="tripadvisoritems">
<h6>Recent Tripadvisor Reviews</h6>
</div>
<ion-slides [options]="sliderOptions">
<ion-slide *ngFor="let item of tripadvisoritems">
<div class="item-container ">
<div class="user">
<h3>{{item.user.username}}</h3>
</div>
<div class="image">
<img src="{{item.rating_image_url}}">
</div>
<div class="text">
<h3>{{item.title}}</h3>
<p>{{item.text}}</p>
</div>
<div class="date">
<p>{{item.published_date | DateAnnotation}}</p>
</div>
<div class="country">
<p>{{item.user.user_location.name}}</p>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-grid>
<ion-grid>
<div>
</div>
<div class="period">
<h6>Events in {{item.name}}</h6>
</div>
<ion-list>
<ion-item *ngFor="let item of items" (click)="itemClicked($event, item)" [ngStyle]="{'background-image': 'url(' + item.cover.source + ')'}">
<div class="item-container ">
<div class="date-town">
<span>{{item.data_inizio}}</span>
<span>{{item.place.city}}</span>
</div>
<div class="title ">
<h3>{{item.name}}</h3>
</div>
<div class="place ">
<h4>{{item.place.name}}</h4>
</div>
<div class="category">
<span>{{item.category}}</span>
</div>
</div>
</ion-item>
</ion-list>
<ion-row *ngIf="total===false" class="today-container">
<ion-col>
No Scheduled Event in <br> <span>{{item.name}}</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Now the second last element represented by the ion-slide with tripadvisor reviews is overlaps on the last div represented by normal text. i try this in many page and i have the same problem. No problem with iphone or web view.
If i enclose the ion-slide in the ion-card i don’t have a problem
any solution?
this is the bug:
