I want to open a popup when clicking a button, and it should appear exactly below the center of that button. I tried using the mouse position on click, but I actually need the position of the component itself. I also considered using a tooltip, but I need to include buttons in the popup content, so it needs to be a full view. Any suggestions?
This is tricky because there are 2 ways to open a popup and only one of them has the functionality you're looking for.
You have to use a popup action (not a script) attached to an event. Then from the action configuration UI you have to set position to "Relative" and click the down arrow icon. It's also important to understand that "viewport bound" will make the popup load within the viewport which is relevant if you're supporting a lot of different screen sizes.
I don't believe there is a way to do this (relative window positioning) using system.perspective.openPopup.
I think actions are asynchronous, so if you have more than one there is no guarantee in the order in which they will execute. Assuming that is correct, just be mindful of that.
I want to support different screen sizes. I tried position relative but the popup opens in a different spot depending on the clicking position. I'd like it to work just like position: bottom on tooltips. Is this only achievable with a hidden coordinate container?
I'm not sure. Try the "viewport bound" checkbox and see if that's doing anything for you. I suspect it won't because it looks like you're not exceeding the bounds of the viewport.
If you copy your screen layout into a code window on this forum there might be someone that knows what's going wrong. You'd have to have a "safe for posting on a public forums" version of your layout that reproduces the problem without exposing things to the public that shouldn't be public.
You might also want to mention what screen sizes you're designing for if there are specific sizes you're designing for.
I tried the viewport bound with no sucess. I wanted it to work in any display size. I ended up using a dropdown...
I've gone the "hidden coordinate container" route before. Instead of a pop-up I used an embedded view that I would display and hide as needed. I had multiple buttons that had to have the same pop-up so I also had the mouseover action call a helper script that calculated the required position using the button's coordinates and dimensions and repositioned the "pop-up" before making it visible.
It generally worked pretty well except that the pop-up would briefly display the previous button's info before the bindings updated.
1 Like
I have achieved this by toggling the display of a container that is positioned just outside the bounds of the container that it sits in, and setting overflow: visible on that parent container.
1 Like