How can I make a visual element in the UI builder stretch to the resolution of the screen (regardless of it's parent's size)

I am trying to make a tabbed menu and having trouble getting the size right. See images and descriptions:


One page of the tabbed menu is the stats panel, displaying two columns of stats (numbers and text spacing are added in in game don’t worry…)


The #Stats tab stretches the whole length of the screen


The child of the #Stats tab, #unity-tab_content-container, is set to ‘auto’ width and flex. Note that this feature of the tabbed menu container is auto-generated and I cannot change the values in the inspector


The #StatsHolderVE Visual Element sits inside the container. I can give it an arbitrary size, but since the game should be playable at various screen resolutions I can’t use px or % to make it bigger than it’s parent. Presumably the container will grow if I fill it with longer rows, but I would like it to be spaced so the two columns take up have the screen size each, regardless of the resolution used. Because the parent object is unchangeable, I’m not sure how to do this.


Slightly prettied up. The name and value columns should each be 23% of the screen and the break column should be 8%. It is not working as desired.


In game numbers get even more muddled. I don’t understand what ‘auto’ means, I thought it adjusted the size to fit the contents…

Why is the parent object unchangeable?

Start with the basics: make an element that’s always the size of the screen. I actually think that’s the default anyway, so a UI document with a single element will fill the screen.

Now if you add two children in the same row, they will automatically take up 50% of the size each.

So I’m not sure what exactly you are stuck with. But general advice if you encounter one of those issues is to create the simplemost example in a test document to see what the minimal steps are to get to the behaviour you want. Because it’s easy to not see the forest for the trees (elements and their properties and styling). Also some properties may alter the behaviour which may be confusing, eg if you have an element with margin/padding it will always be offset and it’s easy to forget about this at times.

I am using the Tab View control object to create a tabbed menu, following this tutorial: Unity - Manual: Create a tabbed menu

The Tab View automatically creates child objects, which are greyed out and unchangeable in the UI Builder inspector, as shown in the images.

I think I have achieved what I was looking for by setting all of the children of #StatsHolderVE to use Positioning Mode > Absolute. Hate that it is absolute relative to it’s parent and not the true screen but it seems to work:

This is where you use USS styles and selectors to modify said visual elements. So if you want to modify the style of the #unity-tab__content-container, you make a USS style with that name and it will modify said visual element.

Definitely don’t get in the habit of using absolute positioning too much.