How to set VisualElement to width of screen?

[juhaelee]

I’m trying to create a square in a mobile game by getting the width of the screen and setting the height to the width. For example:

VisualElement rootElement = GetComponent<UIDocument>().rootVisualElement;
VisualElement box = rootElement.Q<VisualElement>("Box");

 box.style.height = Screen.safeArea.width;

However, when I do this, it makes the element too large (See attachment).

Anyone know how I can achieve this?

[uMathieu]

Check this previous post:

UI Builder. Problems with scale images

There is a way to get an aspect-ratio, but it’s a little couter-intuitive. The padding-top property, when specified as percentage is relative to the parent element’s width. Thus, you can set a height of 0, and use a percentage padding-top and width to get a element that will have a constant ratio. Now controlling the height through padding will be fine if your element only has a background image and no children, since the content will be pushed downward. If you want to add children, you need to…

In your case, the both width and padding-top should be 100%