Element alignment issue (UI Toolkit)

Unity Engine
,
1

Hello!

I’m making a Calendar. I have a VisualElement for each day and a Label inside each element to represent the day of the month. The Labels are centered via Position: Absolute, Top 50% etc. etc.

The first render is fine, but when I switch months and I loop through the elements to change the Label text, the Label ends up as misaligned, sometimes even being cut in half. VisualElement.MarkDirtyRepaint doesn’t seem to work, unless I’m misunderstanding its usage.

Now I ended up using a somewhat hacky solution, I just set the Display to none and then next frame I set it to Flex and all is well. But as said, the feels a bit hacky and although it’s not the end of the world I could do without the little flicker that occurs with this solution (as well as the flicker becoming even more apparent at lower framerates).

Is there some other way to circumvent this issue?

2

I’m not sure why you would use absolute positioning. The flex system can easily layout the label at the top of the visual element, and then some middle-center text alignment will keep the text centered regardless of its contents.

3

Apologies for not being clear enough. I’m using absolute position because on top of wanting it in the actual center of the square, the label will act as a backdrop for events that are taking place on that day. I need the position to be absolute so the Label doesn’t “take up space” in the hierarchy.

9761038--1397968--upload_2024-4-9_23-14-23.png
9761038--1397968--upload_2024-4-9_23-14-23.png1372×766 74.2 KB

4

You can just make the events child visual elements of the label, and they will overlay it.

5

That is actually a much better alternative than my solution, thank you. Not only does it git rid of the positioning problem I was having but now I can also just call Clear() on the day number Label to clear the event Labels.

Cheers.