I’m setting up the UI for my experience and it used a lot of Overlayed / screen space UI elements. To be responsive, I need to be using percentages but I’m struggling with the positioning and getting things to behave how I want.
The documentation is lacking in examples of how to do basic things like pinning an overlayed UI element to a corner or a section of the screen. For instance, I can seemingly pin something top left by making the element “Position Absolute” and then doing something like 5% Top, 5% left - and then make the width and height of the element 5% each. That seems to scale accordingly and stay pinned. However, if I want to the same to the right side, I would have thought I could do 5% and 5% (or -5%) right but it still pins that left. Meaning that I’d have to do something like 95% left or something to get it to kinda act right? Just want to know if this is the intended way to do that.
Also, I’m struggling to figure out how to pin something center, when it seems like every pivot point is top left. How can I position something using the centered pivot point of the element? Is that possible?
You’re right that position: absolute works similarly to CSS, and the top, left, right, and bottom values are all between 0 and 1 (so 5% would be 0.05). When you’re pinning something to the right, don’t use left; use right: 0.05, and that’ll anchor it 5% away from the right edge. If you mix left and right, it’ll stretch the element between them, which might not be what you’re going for.
The system assumes the pivot is top-left, so to truly center something, set top: 0.5, left: 0.5, and use transform: translate(-50%, -50%) to offset it back by half its size. That gives you a centered pivot visually, even though the actual pivot hasn’t changed.
This MDN article might help as a refresher, since positioning here really does follow standard CSS behavior. And there’s also a good breakdown on anchoring in this thread: Setting an Anchor Point - #2 by GeorgeButler
I see - I think I’ve found my issue. When you toggle position absolute, it shows the four sides and their values are 0 and greyed out. However, when you type any value into these and then put it back to 0, it will still have an effect on it (I had the left at 0 and right at 5% and it was still pinning left). If I toggled position absolute on and off then they would grey out again and I could just input the 5% on the right and it would now pin right. Not sure if that is the intended workflow but it seemed confusing and like a bug to me, especially when I couldn’t just right click or double click the icon to reset it to grey.
Also, with the new UI updates, is the process still having to preview any changes by typing in values and building the experience to preview? There’s no realtime viewing yet?
Also, is there a way to make frames or UI elements not takeover the raycasting? If I enable a frame it seems to jump to the top of the order and now any elements can no longer be clicked.
That’s correct there’s no UI preview yet, however it’s planned.
Also unfortunately there isn’t a way to prevent the UI from consuming your input events, however I forwarded this to our team.