Question UI element that doesn't resize with CanvasScaler

Hi,

I have a Canvas (Render Mode is "Screen Space - Overlay") with a CanvasScaler component (UI Scale Mode is "Scale With Screen Size", Screen Match Mode is "Match Width Or Height", Match is 0.5).

This allows me to develop a responsive UI, but now I need to have a panel in my UI which does keep its exact width when the window is resized vertically. But with CanvasScaler, the dimensions of the panel are resized to match the new resolution, and I'm stuck on it...

I hope my issue is clear enough, any help would be very appreciated

 

you can either use Better UI (see signature) or put the panel into another Canvas with a different CanvasScaler.

PS: please describe what you mean with exact width. Do you mean width in pixels or percentage of the screen? If the latter, you can use anchors.

 

Thank you for your reply. I already thought about put it into another Canvas but I need my other elements behave according to it.

When I say "exact width", I mean that the panel must have exact dimensions for a reference resolution (e.g. width of 100 pixels for a resolution of 1920:1080). It's hard to explain. While the aspect ratio is conserved (16:9 in my example), the panel has to be resized with Canvas Scaler. But in other ratios (like 4:3) I want the dimensions of the panels to be scaled "like if" the aspect ratio is 16:9. It's not very clear I know.

I use anchors a lot but it doesn't help in my case.

I found a (rather poor) solution that consists of changing the Match property of the Canvas Scaler to 1. It works fine because in my case that's the width that I wanted to be constant. But it doesn't cover every case.

 

If I understand you correctly (based on the canvas scaler = 1 solution) you want to scale the object based on the screen height and not the screen width.
you can achieve this by moving the vertical anchors to the border of the ui element. This will work also with other canvas scaling modes. If you do it right, your RectTransform should have fields called "Top" and "Bottom" with a value of 0 for both.
If you then add an aspect ratio fitter to the element and set it to "Height Controls Width", you hopefully have the element at the desired size in any resolution.
Maybe you need to adjust the anchors and pivots: make sure min.x and max.x of the anchors have the same value and the pivot also has that value (for example: all 0 to have width changes at the right side only).

 

I didn't know the Aspect Ratio Fitter component, I will take it a look!

 

After some testing, the Aspect Ratio Fitter component seems to be exactly what I wanted (I had started to code an equivalent one myself), thanks a lot!