UI element attributes being applied inconsistently

[powershellwhizz]

I am new to the tabletop UI and currently learning how to build a UI. I have read all the tutorials from the website and steam. I decided I'd start with a basic UI someone else created which looks similar to what I want and tweak it from there. Eventually I ran into some weird results so I stripped everything back until I got just this basic UI (it doesn't do anything but that's not the point for this exercise).

<Defaults>
	<Panel class="WindowBorder" color="#8F8478" outline="#635351" outlineSize="2 -2" />
	<Text class="UIText" fontSize="18" fontStyle="Bold" color="#000000" />
</Defaults>
<Panel id="ScoreSheetPanel" class="WindowBorder" width="385" height="475" rectAlignment="MiddleRight" showAnimation="Grow" hideAnimation="Shrink" returnToOriginalPositionWhenReleased="false" allowDragging="true" color="#bbbbbb">

	<Row id="MenuBar" class="MenuBar" color="#FFFFFF" width="385" >
		<Text id="WindowTitle" text="Roll Calculator" class="UIText" alignment="UpperCenter" height="20" />

	</Row>

</Panel>

This will produce a basic UI on the side with a grey background and white title with the words "Roll calculator".

If you change this code to embed the row element inside a <VerticalLayout> tag AND set childForceExpandHeight to false,it doesn't acknowledge the color attribute of the row (which makes it white), the row ends up being grey. It also doesn't render the row element at all, even if I add height and preffered heigh attributes.

<Panel id="ScoreSheetPanel" class="WindowBorder" width="385" height="475" rectAlignment="MiddleRight" showAnimation="Grow" hideAnimation="Shrink" returnToOriginalPositionWhenReleased="false" allowDragging="true" color="#bbbbbb">
<VerticalLayout childForceExpandHeight="false" >

	<Row id="MenuBar" class="MenuBar" color="#FFFFFF" width="385" height="20" preferredheight="20" >
		<Text id="WindowTitle" text="Roll Calculator" class="UIText" alignment="UpperCenter" height="20" preferredheight="20"/>
	</Row>

</VerticalLayout>
</Panel>

It's as if it can't see the row element. So, I made the asumption that this is because row is a child of the tablelayout element, and ammended it again, this time encapsulating the row tag inside a tablelayout tag. Same result.

<VerticalLayout childForceExpandHeight="false" >

<TableLayout height="20" preferredheight="20">
	<Row id="MenuBar" class="MenuBar" color="#FFFFFF" width="385"  >
		<Text id="WindowTitle" text="Roll Calculator" class="UIText" alignment="UpperCenter" height="20" />
	</Row>
    </TableLayout>

</VerticalLayout>

What makes it even stranger is that if I remove the tablelayout tag (so we are back to second block of code above), but set the verticallayout childForceExpandHeight to true, it now honours the color attribute for row (sets it back to white).

<VerticalLayout childForceExpandHeight="true" >

	<Row id="MenuBar" class="MenuBar" color="#FFFFFF" width="385"  >
		<Text id="WindowTitle" text="Roll Calculator" class="UIText" alignment="UpperCenter" height="20" />
	</Row>
 
</VerticalLayout>

All of this is really inconsistent. Is this a known issue or am I doing something wrong? Can row elements be nested in other elements and are they processed correctly normally or must they always be inside tablelayout?

thanks,