Search code examples
wijmo5

How to center wj-popup with owner element


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?

enter image description here


Solution

  • 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