Text margin in UI Build and Game View mismatch

[achimmihca]

After upgrading to Unity 2021.2.0f1 and UIBuilder 1.0.0-preview.18, the text of my UXML document are rendered differently.

There is now much more vertical space in the Game View (and also in the built project).
The UIBuilder renders it correctly, with no margin or padding.

I created a screenshot of both, Game View and UIBuilder. For this screenshot:

• The reference resolution in PanelSettings is 800x600px.
• PanelSettings are set to “scale with screen size”
• Game View resolution is set to fixed pixel size of 800x600 px
• UIBuilder root element (the .uxml file) is set to 800x600 px
• Thus, there should be the same scaling factor of 1 for Game View and UIBuilder. Still, the layout differs.

Is this a known issue?
It is pretty hard to design a UI when the result changes between Unity versions and tools.

[achimmihca]

If it helps, you can find the UXML document and the rest of the project here:

UltraStar-Deluxe/Play/blob/master/UltraStar Play/Assets/Scenes/Main/MainSceneUi.uxml

[achimmihca]

So, I found the issue using the pretty awesome UI Toolkit Debugger.

The Game View was using styles from UnityDefaultRuntimeTheme.tss
There, some padding and margin for labels are defined.

The UIBuilder does not use these styles, which is why it rendered differently.

I fixed it by explicitly setting these properties in my custom style sheet.

.unity-label {
    margin: 0;
    padding: 0;
}

Now, both UIBuilder and Game View are rendering my UXML the same way.

[JuliaP_Unity]

Hello! You can have the UI Builder use the Default Runtime Theme by selecting it on the dropdown, that way you’re sure to match the same basic styles that you’ll see on the Game View. The value selected by default is an Editor style, so there’ll be differences in basic styles.

The name you’ll see there will match the name of the TSS file on your project.

[Haxel0rd]

@achimmihca

I fixed it by explicitly setting these properties in my custom style sheet.

Same method but incase one wants this without adding an extra style selector;
i put margin “1px 0px 0px 0px” on the Label of question, this had the same effect.
(note: 0px will cause unity to fallback to unity default styles). Cheers