- Home /
Stacked UI Panels do not position as expected
I want to create two Panels where each fills half of the Canvas. So my idea was to create one big Panel that makes up the desired full size. Then two Panels which are under the big one with anchors 0 - 0.5 and 0.5 - 1. As you can see here:
Well it does not work as I would expect. The view does indeed display the anchor arrows as expected. But neither the background image (one blue, one yellow) does respect the boundaries, neither does the button in each Panel. The second button should be just left from the center and not on the right side on top of the first one. I do not want to enter absolut pixel values but percentages instead so that the UI looks the same on differently sized screens. What am I doing wrong?
Have you tried setting the left value to 0, ins$$anonymous$$d of -552? You'll probably need to put some absolute pixel values for padding, otherwise I would suggest taking something like 0.51 as left anchor. You could also try adjust your canvas (CanvasScaler script) to Scale with screen size. I normally use 1024*768 and take iPad as a base resolution, other resolutions will then just add whitespace on the right/left or top/bottom according to the $$anonymous$$atch setting.
I did not put that -552 there. As soon as I enter "0.5" for "$$anonymous$$in X Anchor", it automatically sets the left value to 50% of the parent Canvas. I already have my Canvas scaling with screen size. I just want to have two panels where each is 50% width of the parent.
It's because when you edit the anchors, it tries to keep the same layout, thus changing the rect transform coordinates. If you change those to 0, it should be 50%.
Your answer
Follow this Question
Related Questions
Editor Interface Gets Scrambled 0 Answers
UI working fine in editor but glitched in standalone builds 1 Answer
How change speed of scrollbar (ui) with mousewheel 0 Answers
Unable to move UI elements with cursor 0 Answers
Canvas shrinks over time 0 Answers