So positionieren Sie ein Popover in Ionic 2

Question

Wie positioniere ich ein Popover manuell in Ionic 2?

Ich kann die Position in einer CSS-Klasse nicht festlegen, da der Popover-Controller die Position mit einem Inline-Stil festlegt.

Answer 1

Wenn man durch den Code sieht, scheint es keine Option für die Position des Popover zu geben. Wenn das Popover jedoch geöffnet wird, weil der Benutzer auf etwas getippt hat, kann es durch das Klickereignis positioniert werden. Wir können dieses Wissen für die manuelle Positionierung als auch verwenden:

let pop = this.popoverCtrl.create(MyPopover); 

let ev = { 
    target : { 
    getBoundingClientRect :() => { 
     return { 
     top: '100' 
     }; 
    } 
    } 
}; 

pop.present({ev}); 

ein paar Dinge zu beachten:

• Sie den Wert für top festlegen können, left oder beides.
• Die Werte müssen in Pixel als Zahlen angegeben werden.
• Wenn top oder left nicht angegeben ist, wird der übliche Positionierungsalgorithmus für diesen Wert verwendet.

Ich wäre glücklich zu wissen, ob es einen besseren Weg gibt, aber bis jetzt ist dies das Beste, was ich mir vorstellen konnte.

Answer 2

Obwohl der obige Code für einige Leute funktioniert, aber ich fand eine bessere Lösung, wo die cssClass auf Popover übergeben.

Zur Nutzung des CssClass zu machen, müssen Sie sie global in app.scss erklären, wie unten gezeigt:

.custom-popover .popover-content { 
 
    width: 80%; 
 
    top: 70px; 
 
    left: 30px; 
 
    bottom: 70px 
 
}

In Ihrem .ts Datei

, können Sie die Klasse wie unten passieren kann :

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'custom-popover'}); 
 

 
popover.present();