How to keep rect transform points glued to its anchor points?

[mrVentures]

Hello I have a UI element that I want to take up the left hand side of the screen. No matter the aspect ratio or screen size, I want this element to cover 50% of the width and 100% of the height. How can I achieve this?

I setup my rect transform as follows and it looked great!

s

But then I expanded my editor window and everything was ruined. The anchors stayed where they should, but the rect transform scaled to no longer keep their points.

How can I fix this issue, allowing the screen UI elements to scale, but keep their anchor points? I have the following canvas settings for reference.

Would you like a video demonstration? Here is a YouTube video of this issue:

Question: How to make rect match anchors?

[Kurt-Dekker]

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Unity - Manual: Designing UI for Multiple Resolutions

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

[mrVentures]

The issue appears to be that the element had rotation which results in the scaling behavior returning inverted results.

[xucian]

ah, right! I always hated that in ugui, but there might be a good reason for it to be this way.
also, consider using a layout group with a single layout element and play with the Flexible Width/Height properties (you can set them as 0.5 or whatever) if you want a more declarative approach instead of manually moving them