Ionic 3 листовка на карте - PullRequest
Новая
       11

Ionic 3 листовка на карте

0 голосов
/ 25 сентября 2018

Мне удалось использовать карты листовок в ionic 3, но у меня проблема с позиционированием.Я хочу квадратную карту под весь текст при прокрутке.

Я прочитал кое-что о том, как использовать листовки, и наткнулся на этот sass. 

.map-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 50%;
    width: 50%;
    }

это компонент html 

<div class="map-container">
  <div #map id="map" style="width: 100%; height: 100%">
  </div>
<div>

здесь я используюкомпонент 

<ion-content padding>
    <div (swipe)="swipeEvent($event)" *ngIf="event">

          <h1><b>{{event.title | uppercase }}</b></h1>

          <p>{{ event.custom_fields.evcal_srow*1000 | date: ' EEEE MMMM d' }}</p>

          <p><b>{{ event.custom_fields.evcal_srow*1000 | date:  'h:mm a' }} - {{ event.custom_fields.evcal_erow*1000 | date: 'h:mm a' }}</b></p>

          <p>{{event.content | removehtml }}</p>

          <map [data]="event"></map>

          <h1 (click)="AddToCalendar(event)">ADD TO CALENDAR</h1>
    </div>
  </ion-content>

Это то, что я получаю

И когда я меняю абсолютную позицию на что-то еще, она просто не отображается.

Как сделать так, чтобы карта отображалась под текстом?

1 Ответ

0 голосов
/ 26 сентября 2018

Вы добавляете Like this type CSS 

.map-container {
float:left;
position: relative;
float:left;

}

...