Venue page overlap over venue detail page

@rizwan478 wrote:

I am working on ionic 4 app. i am getting layout problem when i click any venue to check the detail of that venue then venue data overlap over venue detail page for 1 to 2 second as shown in picture. I dont know how could i resolve.https://prnt.sc/px8fs7. My code for venue detail is as below

<ion-content *ngIf="venue" style="overflow: hidden;">
<div>
  <ion-slides
  [options]="slideOptions"
  pager="true"
  #slider
  (ionSlidesDidLoad)="slidesDidLoad(slider)"
>
  <ion-slide>
    
    <div
      class="header-image"
      [ngStyle]="{
        'background-image':
          'url(' +
          environment.API +
          'images/venue/' +
          venue.coverImage +
          ')'
      }"
    >

    <div *ngIf="mapView" >
       
          <ion-button style="margin-left:-275px;" (click)="backButton()">
        
            <ion-icon
              slot="icon-only"
              src="../../../assets/icon/back-arrow.svg"
            ></ion-icon>
          </ion-button>
        
      
        </div>
  
  </div>
   
  </ion-slide>
</ion-slides> 
</div>

  <!-- </div> -->
 

  <ion-grid class="bumper">
    <ion-row>
      <ion-col
        ><h1>{{ venue.name }}</h1></ion-col
      >
    </ion-row>
    <ion-row>
      <ion-col>
       
        <p>{{ venue.street1 }}</p>
        <p style="margin-top: -15px">{{ venue.street2 }}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ul class="info">
          <li class="price" [ngClass]="venue.type.toString().toLowerCase()">
            £{{ venue.averagePrice | number: "1.2-2" }}
          </li>
          <li class="secondary">{{ venue.secondaryInfo }}</li>
          <li class="time">{{ getTime() }}</li>
        </ul>
      </ion-col>
    </ion-row>
    <ion-row margin-bottom>
      <ion-col size="12">
        <ul class="tags" *ngFor="let tag of venue.tags">
          <li>{{ tag.name }}</li>
        </ul>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <!-- <h2>{{ venue.strapline }}</h2> -->
        <p>{{ venue.description }}</p>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="venue.offers.length > 0">
      <ion-col><h1>Offers</h1></ion-col>
    </ion-row>
    <ion-row *ngFor="let offer of venue.offers">
      <ion-col>
        <ion-badge color="warning" no-margin>{{ offer.strapline }}</ion-badge>
        <p style="margin-top: 0.4em">{{ offer.description }}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <h1>Opening Times</h1>
        <ion-grid no-padding no-margin>
          <ion-row *ngFor="let times of venue.openTimes" no-padding no-margin>
            <ion-col size="4" class="times">{{
              getDayName(times.dayNo)
            }}</ion-col>
            <ion-col size="8" class="times" *ngIf="times.isOpen === false"
              >CLOSED</ion-col
            >
            <ion-col size="8" class="closetime" *ngIf="times.isOpen === true"
              >{{ times.openTime.substring(0, 5) }} -
              {{ times.closeTime.substring(0, 5) }}
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
  </ion-grid>
  
    <div id="map_canvas"></div>
  

  <ion-grid class="bumper" *ngIf="events.length > 0">
    <ion-row>
      <ion-col><h2>Upcoming Events</h2></ion-col>
    </ion-row>
    <app-result-item
      *ngFor="let e of events; let i = index; let c = count"
      [routerLink]="['/tabs', 'events', e.id, e.instanceDate]"
      itemType="event"
      [date]="e.instanceDate"
      [data]="e"
      [index]="i"
      [count]="c"
      [showDate]="true"
    ></app-result-item>
  </ion-grid>
</ion-content>

Posts: 1

Participants: 1

Read full topic