Widget component "Size Box" does not resize properly

Development Programming & Scripting Blueprint
1

I have made a simple UI widget consisting of not much more then a vertical box filled with two text components and a Size Box. (Image.1)
I want the Size Box however to be a square. But overriding the width and height does not seem to work.
Padding is set to 0 for the text components and the Size Box.
The Image component has Brush set to “none” and Image Size set to 128 by 128.

I then add the UI_ShopkeeperItem widget inside a Uniform Grid Panel of another UI widget called UI_Shopkeeper with blueprint code.
But ingame (image.2) it just does not stack properly.
The green outline on one of the widget is because the button component turns green upon mouse hover.

How do I get the Size Boxes square?
And then how do I make them automatically space out in a Uniform Grid Panel?

I am using engine version 4.25.

SizeOverride.jpg
SizeOverride.jpg900×600 149 KB

2

After some time I returned to this project and figured it out.
Apparently in the parent component (Vertical Box) I had to set Size To Content to true.
This can be found in the details panel under “Slot (Canvas Panel Slot)”.

This does however also take effect from all its children.
So if the text “Text Block” is changed to some really long text, then the width of the Vertical Box will also change.
And with that, the Size Box will also change its width.

This can be fixed by setting the Horizontal Alignment of the Size Box to anything but “Horizontally Align Fill”.
Or in the Text details panel set wrapping to true, and change Wrap Text At to your desired width.

4 Likes