How to center wj-popup with owner element

Question

I want to center wj-popup which has an owner element to the center of the owner. That means that the center of the owner element must be the horizontal center of popup. I have not found any info about this (only about popup without owner element, which is centered by default). How can I do that?

score 0 · Accepted Answer · answered Oct 05 '16 at 15:25

The present version of wijmo5 (v5.20162.211) does not allow this, but there is some workaround described here: http://wijmo.com/topic/how-to-center-wj-popup-with-owner-element-by-its-owner-2/#post-79683.

Also since I'm using some npm ui components and angular2 that don't allow this workarond also, I had to catch a mouse event and modify the function like this:

setPopupPosition(event:any, element:any) {
    let mouseX = event.clientX;
    let popupWidth = element.popup.hostElement.clientWidth;
    let popupPosition = mouseX - popupWidth / 2;
    element.popup.hostElement.style.left = (popupPosition < 0 ? 0 : popupPosition) + "px";
}

element.popup - is declared in popup component with @ViewChild of popup.

and HTML:

<button(click)="setPopupPosition($event, profileFilterPopover)">ButtonName</button>
<profile-filter-popover #profileFilterPopover [owner]="showProfileFilterButton" [reportId]="reportId"
                                [cubeId]="cubeId"></profile-filter-popover>

where profileFilterPopover is the id of popup

How to center wj-popup with owner element

1 Answers1