положение ион-поповера над ионно-модальным - PullRequest
Новая
       34

положение ион-поповера над ионно-модальным

1 голос
/ 30 октября 2019

Я пытаюсь отобразить всплывающее окно с информацией в уже открытом модале. Однако поповер не отображается в нужном месте. Даже когда событие передается в popoverController, местоположение не является правильным.

Можно ли отобразить всплывающее окно только под информационной кнопкой?

Код в модале, где я вызываюthe popover: 

const popoverElement = Object.assign(document.createElement('ion-popover'), {
      component: 'info-popover',
      event: event,      
    });

document.body.appendChild(popoverElement);
return await popoverElement.present();

Снимок экрана Popover выше:

РЕДАКТИРОВАТЬ

Это то, что DOMвыглядит как. Как видите, модал прикреплен к body> app-root> ion-app. И поповер подключен только к body

РЕДАКТИРОВАТЬ 2

Отключение теневого DOM в трафарете может решить эту проблему, однако я бы предпочел нек. 

@Component({
  tag: "component",
  styleUrl: "component.css",
  shadow: false
})

1 Ответ

0 голосов
/ 31 октября 2019

Кажется, проблема в том, что свойство target события click - это затененный родитель, а не сам элемент, по которому щелкнули, поэтому устанавливает неправильную позицию всплывающего окна .

Поскольку выВручную передать событие, обходной путь будет вручную установить target. Но поскольку это поле только для чтения, вам нужно сделать это с Object.defineProperty (замените theClickedElement): 

Object.defineProperty(event, 'target', {value: theClickedElement})

const popoverElement = Object.assign(document.createElement('ion-popover'), {
  component: 'info-popover',
  event: event,      
});
...