Change VisualElement width/height based on EditorWindow width/height using only USS

Unity Engine
1

Hey,

So I would like to build an editor with 2 areas: a “work area” on the left and an “info area” on the right and I would like to these 2 areas to completely fill the editor window from top to botton. From what I read USS doesn’t support “width: 100%”. Okaiii, is it possible to somehow pull this off using purely USS or do I need to right some code to do it. I have a feeling this could be done by styling the root visual element, but how do you do that? Is there a class for it?

I find it strange that USS doesn’t have this feature. Yoga seems to support it, is there a reason for it? Will we have in the feature?

I looked through the forum and didn’t find anything about this. I’m new to the topic, so maybe I didn’t know how to properly search for it.

2

We do support % in 2019.3 but if you’re using an older version there are still options.

Here’s what you can do:

  • Create a VisualElement that serves as your true “myRoot” and add it to the rootVisualElement

  • Set flex-grow: 1; in USS on your “myRoot”, also set it to flex-direction: row;

  • Add VisualElement “panes” as “left” and “right” to “myRoot”. Set both to flex-grow: 1;

3

Is there also a way to set this in the UI Builder (in the current 2019.3.0f3)? I can change the width/height to % in the USS file (and that seems to work correctly), but I can’t find a way to set it in the builder (changing the values there sets it back to px) :hushed: