Canvas Panel `Size To Content` doesn't work, causing clipping

Development Programming & Scripting UI
, , , , ,
1

In UE 5.3.2, I have a widget with the following hierarchy:

  • Canvas Panel - Full Screen
    • Scroll Box
      • Canvas Panel - Item 1
        • Scale Box
          • Size Box
            • Image - Item 1

The (non-default) editor properties are:

  • Scroll Box:
    • Slot (Canvas Panel Slot):
      • Anchors:
        • Minimum: (0.0, 0.0)
        • Maximum: (0.2, 1.0)
  • Canvas Panel - Item 1:
    • Slot (Scroll Box Slot):
      • Horizontal Alignment: Fill
      • Vertical Alignment: Fill
  • Scale Box:
    • Slot (Canvas Panel Slot):
      • Anchors:
        • Minimum: (0.05, 0.05)
        • Maximum: (0.95, 1.0)
      • Size To Content: Enabled
    • Stretching:
      • Stretch: Scale to Fit X
  • Size Box:
    • Slot (Scale Box Slot):
      • Horizontal Alignment: Center Align
      • Vertical Alignment: Center Align
    • Child Layout:
      • Width Override: 150.0
      • Height Override: 100.0
  • Image - Item 1:
    • Slot (Size Box Slot):
      • Horizontal Alignment: Fill
      • Vertical Alignment: Fill

What I want to do is, on the left 20% of the screen, there should be a column with a list of item widgets. Each item widget should have a percentage padding (5%) on the left, right and top sides. The aspect ratio of each item image must be preserved, which is 1.5:1. An item image must be shown as wide as possible, taking up all the space offered by the scroll box widget.

image
image2541×1265 288 KB

However, as you can see in the screenshot above, the item image is slightly clipped along the Y (vertical) axis.
I played around a bit to create the second widget in the scroll box which is more or less what I visually like to see. It is essentially the same widget except it isn’t inside a canvas panel and the item widget paddings are entered in pixels. However, I want to avoid setting the paddings myself either at design time or runtime.
So, my question is, how can I prevent the clipping in the first case, while satisfying my requirements above?
Keep in mind that I’m creating my widgets in blueprint mode only. So, no C++. And please ask me for further information if you are not sure of anything :slight_smile:

I would appreciate all the help I can get from you guys :pray: