Popup: How to show on top of the anchored element by default

Page layout & navigation
1

I’m having some issues because the popup (by rendering at the bottom of the anchored element) is messing up my useability. Is there an option for showing the popup on top on the anchored element by default, instead of bottom? or is there and JS / CSS way of doing it?

2

Hi,

In the Popup component’s onPosition event you have access to the target element and you can set a custom position or size if you need to. Here’s a small example:

onPosition: (args, inst) => {
const popupElm = args.target.querySelector('.mbsc-popup');
    // Modify the left and top position of the popup
    // Find the anchor DOM element and adjust the values accordingly
    popupElm.style.left = '110px'; // adjust value here
    popupElm.style.top = '220px'; // adjust value here
    // return false to prevent the built in positioning
    return false;
},