Using VisualElement automatically set up inline styles

Hello,

I upgraded to Unity 2022.2.0f1 and, since this update, every VisualElement I add to my hierarchy has flex-grow and background-color by default.

Is this a bug or do I miss something?

8660961--1166232--upload_2022-12-14_12-52-16.png

<ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0);" />

Hi,
Yes, we made that change because the previous way of doing things was causing about one bug report per month. By “previous way of doing things”, I mean that blank VisualElements were added with fake styles (predetermined size and background color) that would just disappear if any style change was made to that element. And more often than not, it would revert the size and background color of the element to nothing (no size, no color), having users think that the element had been removed from the hierarchy. Other reports were made stating that the element was not easily pickable on the canvas once that happened. So we (along with our UX designers) decided to add overrides to those blank VisualElements. While this is not ideal, at least it is obvious to the inspector that they have overrides and that those can easily be removed. Probably not the perfect answer but I hope that clears things a bit.

I think you should put this in the default theme and also make it readable and if possible editable. I’ve been told by a css expert to never ever use style=“” in a document.

2 Likes

Totally agree with this. I don’t think Unity should generate inline styles because some users don’t understand UI Toolkit yet. It’s not the behaviour I want to get when I’m drag’n’dropping an empty VisualElement into my hierarchy.

And what happen when I’m layouting hundreds of empty VisualElements? I must “Unset All” on each VisualElement. It’s not a good UX approach.

3 Likes