Border incorrectly filling in game

Development Programming & Scripting Blueprint
1

Hello,

My UI contains a pretty standard setup: a border containing a vertical box, which contains buttons, nothing fancy:

BorderPbSetup.png

When i try to fill the border with a color or picture, everything goes well in the editor (here i colored it purple to make it obvious):

BorderPb.jpg

But in game the filling is mysteriously cut off at the top:

BorderPb2.jpg

I tried various options in the appearance tab, with no success.

Any idea of what’s wrong here ?

Thanks
Cedric

2

Show us the slot the border is in (its parent), at the top of the details panel when you select the border. If the border is sitting in a canvas panel, and you do not size to content, you’d get the above, undesired result, for example.

3

Hi, thanks for the reply.

The border is part of a horizontal box, so no option to size to content:

BorderPb3.png

I tried to change the auto/fill option but “fill” messes up the whole display at runtime (only): the buttons are moved to the left and disappear behind the rest of the UI.
In the editor, pretty much all options work fine, but as soon as i go in game, the display goes wrong.

The global structure of the UI is quite simple: a border that contains a horizontal box, which contains 3 UI borders:

BorderPb4.png

Cedric

4

If the parent is a horizontal box, you have 2 options here:
https://forums.unrealengine.com/core/image/gif;base64

  • use Fill, which gives you a number (to the right of Fill) to play with - this is the amount of space percentage-wise in 0-1 range this element will occupy in the h-box. Setting the 3 borders to Fill 0.4 | 0.4 | 0.2 ] - they give them 40%, 40% and 20% of the available space respectively:

conentsize.jpg
conentsize.jpg808×464 70.3 KB

  • or wrap the offending border with a Size Box and override the desired Height and Width. This will force any and all parents to respect those values when they calculates their own desired sizes in relation to their own parents.

This would solve any internal shenanigans.
[HR][/HR]
Another thing we’re not seeing here is the parent of this very widget. Since it does not have its own canvas (and it probably should not), you, most likely, add it to another container. This new container can and will affect the child’s overall behaviour since it will create a new slot for it.

So even if I create my perfectly looking widget above and then place it another container (here, a canvas)…

conentsize.jpg
conentsize.jpg808×464 70.3 KB

…I end up with this mess, where the buttons want to preserve their size, inherited clipping allows for the bleeding, the vertical box does what it can to accommodate things but the canvas slot this widget is sitting in overrides the size to 100 | 50.27. The poor vertical boxes conforms to whatever size is forced by the canvas.

Size To Content would ignore the canvas’s request. In short: do check the slot this widget is added to as well, for example:

0ff94655080eab7ed091167e7491d1b5823f949e.jpeg
0ff94655080eab7ed091167e7491d1b5823f949e.jpeg808×464 70.3 KB

If this does not solve your issue, you’d need to include more info, especially about the slot this widget added to.

5

Hello again,

Thank you so much for the detailed explanations, it helped a lot and put me on the right track.

The key point that you guessed was that the parent was a canvas panel.

I couldn’t have things working as long as my UI was in a canvas panel.

I did try to change the auto size, to wrap in a Sizebox, but i couldn’t succeed.

Finally, as i only needed one child, i changed the Canvas Panel into a Scalebox and it works well.

All in all i couldn’t have it working with the canvas panel, so this is more a workaround, but using a Scalebox solved the visual problem.

I would never have thought that the parent could influence the child this much !

So again, thank you for your help, very appreciated,
Cedric