How do you style the root element in uss?

I'm a 100% a beginner in using the UI toolkit, so I just started up by creating the most basic sample:

Code (XML):

1. <?xml version="1.0" encoding="utf-8"?>
2. <engine:UXML ...>
3.     <engine:VisualElement name="root">
4.         <engine:VisualElement name="top">
5.             <engine:ListView name="list_view" view-data-key="list_view" item-height="40"/>
6.         </engine:VisualElement>
7.         <engine:VisualElement name="bottom">
8.             <engine:Label text="Bottom"/>
9.         </engine:VisualElement>
10.     </engine:VisualElement>
11. </engine:UXML>

and an associated uss file:

Code (css):

1. #root {
2.     height: 100%;
3.     display: flex;
4.     flex-direction: column;
5.     background-color: antiquewhite;
6. }
7.  
8. #top {
9.     flex: 1;
10.     width: auto;
11.     display: flex;
12.     flex-direction: row;
13. }
14.  
15. #bottom {
16.     flex: 2;
17. }

This obviously didn't work; it rendered the entire thing in a tiny blob at the top:



So, how do I apply styles to the root element?

Giving a fixed height like: #root { height: 100px } works; why does 100% not work? Flex: 1 also doesn't work.

In HTML you have to apply a height to the body element; is it perhaps that the 'root' visual element is not being sized to fill the entire window?

What the 'root' directive to set this in USS?

 

It appears to be related to a 0 height 'TemplateContainer' in the heirarchy:



What is this? How do you apply styles to it?

 

Nevermind, I found (by reading the source code of VisualTreeAsset) that clone tree wraps the content in a TemplateContainer;

Code (CSharp):

1.     public TemplateContainer CloneTree()
2.     {
3.       TemplateContainer templateContainer = new TemplateContainer(this.name);
4.       this.CloneTree((VisualElement) templateContainer);
5.       return templateContainer;
6.     }
7.  

Which means you have to do this:

Code (CSharp):

1.         VisualElement content = visualTree.CloneTree();
2.         content.style.height = new StyleLength(Length.Percent(100));
3.         content.styleSheets.Add(styleSheet);
4.        

This is really a rough onboarding process.

 

This USS class should always exist by default though: `:root`,

And for runtime UI (PanelSettings), a .unity-ui-document_root exists on your TemplateContainer.

You can skip trying to access you inspector root by #name if you use the :root class instead.

Alternatively you could just add a .class to your rootVisualElement and style that using a shared stylesheet across multiple different inspectors.

Code (CSharp):

1.  
2. /* root :root, should always exist on both runtime and editor layouts on your root*/
3. :root
4. {
5.      /* style rules */
6. }
7.  
8. /*  this class is applied to your panelsettings template container for your runtime UI */
9. .unity-ui-document_root
10. {
11.      /* style rules */
12. }
13.