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

**URL:** <https://forums.unrealengine.com/t/canvas-panel-size-to-content-doesnt-work-causing-clipping/1780803>\
**Category:** UI\
**Tags:** size, canvas, image, clipping, unreal-engine, question\
**Created:** [March 31, 2024, 8:06pm UTC](https://forums.unrealengine.com/t/canvas-panel-size-to-content-doesnt-work-causing-clipping/1780803 "2024-03-31T20:06:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![coffee2code1234](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@coffee2code1234](https://forums.unrealengine.com/u/coffee2code1234)\
**Post date:** [March 31, 2024, 8:06pm UTC](https://forums.unrealengine.com/t/canvas-panel-size-to-content-doesnt-work-causing-clipping/1780803/1 "2024-03-31T20:06:48Z")

</div>

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](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/2/1/f213f73a117bd9b97f207f8635b40f76acdc95cf.png)  
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 🙂

I would appreciate all the help I can get from you guys 🙏