# Scaling User Widgets **URL:** \ **Category:** Blueprint\ **Tags:** User-Interface, unreal-engine, Widget, Blueprint, question\ **Created:** [March 8, 2023, 1:33am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012 "2023-03-08T01:33:46Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Zapking9224](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/zapking9224/32/1060813_2.png) [@Zapking9224](https://forums.unrealengine.com/u/Zapking9224)\ **Post date:** [March 8, 2023, 1:33am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/1 "2023-03-08T01:33:46Z")
Hi, So I have a widget I created and wanted to add that to a larger widget for a shop system. However, the widget I made is extremely small and when I try scaling it up, everything gets blurred out. Is there a way to scale it better and keep the look of it the same? This first pic shows the widget button system I have ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/a/e/f/aef9fd7b710ac4cbe0491ad78240cfc64832c800.png) This pic shows the widget in a larger canvas ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/1/d/f/1df19491bd9ed65332654661e53975a420d92eef.jpeg) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [March 8, 2023, 3:47am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/2 "2023-03-08T03:47:26Z")
Hey there @Zapking9224! Looks like you want to use your UI elements in 9-Slice mode! I’ve got a thread and another resource that explains it! **Disclaimer: One or more of these links are unaffiliated with Epic Games. Epic Games is not liable for anything that may occur outside of this Unreal Engine domain. Please exercise your best judgment when following links outside of the forums.** > **[9-Slice control in UE4 – Indie Game Development in UE4](https://sgarces.com/?p=215)** > [@9-slice scaling UMG image](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231): > > I just recently discovered the 9-slice scaling feature in UE4, but I can’t seem to wrap my head around how to calculate the margins. For instance, take this simple image: [Button\_DefaultHovered.png] This image is originally 256x256. This image will be used as it is (1:1) but I intend to use this image for buttons as well. This is where the 9-slice scaling comes in handy. I want to button to look something like this: I tried messing around with the margins in UE4, but I can’t see… ---
**Author:** ![Zapking9224](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/zapking9224/32/1060813_2.png) [@Zapking9224](https://forums.unrealengine.com/u/Zapking9224)\ **Post date:** [March 8, 2023, 5:15am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/3 "2023-03-08T05:15:20Z")
Hey @SupportiveEntity Thanks for the response! That fixed the blurry image effect! I’m also trying to find a way to add an image and text on top of a button. Is there a panel I should put it in that should be attached to the button or how would I go about attaching multiple items to the larger button on the left that I colored red? ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/6/f/f6fadef67300c8c322cf7f24585d450ae3eb0caa.png) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [March 8, 2023, 5:23am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/4 "2023-03-08T05:23:26Z")
Depending on the use case, if you drag a text component into the button and whatever else you need under it you should be fine. UMG can utilize autowrapping as well, so you don’t have to worry too much about scaling once you set it up. ---
**Author:** ![Zapking9224](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/zapking9224/32/1060813_2.png) [@Zapking9224](https://forums.unrealengine.com/u/Zapking9224)\ **Post date:** [March 8, 2023, 5:44am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/5 "2023-03-08T05:44:45Z")
@SupportiveEntity So a couple things happened here which I’m not sure how to fix. When I add an image or text or anything as a child of the button, it shrinks the button to fit around the child. I know there’s a toggle for “size to content”, but I don’t see that option anywhere in the details panel. The other problem is that I can’t add more than one child to the button. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/c/1/4/c14acb322523ce18bf36af1b1dff62a6cf5f7c2f.png) ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 8, 2023, 7:02am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/6 "2023-03-08T07:02:27Z")
> [@Zapking9224](#): > > I know there’s a toggle for “size to content”, but I don’t see that option anywhere in the details panel. Size To Content is a feature of the Canvas panel slot - only direct children of the canvas can use it. > The other problem is that I can’t add more than one child to the button. Some widgets can only have 1 child. If you want the button to house more elements, add a panel first - horizontal box, grid, overlay, etc. and only then populate that container with additional widgets. ---
**Author:** ![Zapking9224](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/zapking9224/32/1060813_2.png) [@Zapking9224](https://forums.unrealengine.com/u/Zapking9224)\ **Post date:** [March 8, 2023, 7:10am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/7 "2023-03-08T07:10:46Z")
@Everynone Ok makes sense. And last thing that comes to mind at them moment. Is there a better way to scale things within the horizontal box? I’m wrapping the contents inside of size boxes and I’m not sure if that’s what they are supposed to be used for. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 8, 2023, 7:28am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/8 "2023-03-08T07:28:44Z")
> [@Zapking9224](#): > > Is there a better way to scale things within the horizontal box? I’m wrapping the contents inside of size boxes and I’m not sure if that’s what they are supposed to be used for. Depends on how you want stuff to work and what it’s used for. It might be OK, it might be redundant, it might be necessary. When you use a Size Box, _you_ dictate a specific size the **H** orizontal **B** ox now must _tolerate_. If you do not use a Size Box, the parent panel will have a much bigger say in how the children behave. - here’s a HB with some `Images`, no `Size Boxes` and they’re fine: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/7/7/2775d111914238ddd0f5175ddac12c070c6d620d.png) Above, some widgets have an explicit way of telling the parent how large they wish to be. `Borders`, below, do not do that: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/c/7/f/c7f7e5eeb680cd1e71c1ce1bff567bf1ce41d2a7.png) So I wrapped the last one with a size box so it reports its Desired Size to the HB correctly. It can be handy sometimes, and other times it would make no sense to use a Size Box. * * * Also, Scaling and Sizing are 2 different things. There’s a Scale Box im UMG, too. * * * If you ever need a way to address this kind of distortion: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/0/d/9/0d9b61b1abd614fe2867f5523127b24c8e602573.png) UMG has a [tool](https://docs.unrealengine.com/4.27/en-US/InteractiveExperiences/UMG/UserGuide/Styling/) for that, a.k.a. [9-slice](https://en.wikipedia.org/wiki/9-slice_scaling). It has many names. ---
**Author:** ![Zapking9224](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/zapking9224/32/1060813_2.png) [@Zapking9224](https://forums.unrealengine.com/u/Zapking9224)\ **Post date:** [March 8, 2023, 10:18am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/9 "2023-03-08T10:18:45Z")
@Everynone Oh ok, I’m going to look into 9-slice. And I almost have it looking pretty good with sizing. But now it’s cutting off the text and the rest of the widget. It might have something to do with the text not being formatted correctly inside its horizontal slot. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/c/5/ec55698827cc8a16ecdcd1904c0177813828d7be.jpeg) ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/0/d/60d04331ff66125b80cc6fadff54a1454dd85681.png) ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 8, 2023, 10:20am UTC](https://forums.unrealengine.com/t/scaling-user-widgets/786012/10 "2023-03-08T10:20:46Z")
You’ve added those buttons to something, to some other panel ← that panel now control how they behave. It generally goes like this: - the child: I wanna be THAT big - the outer parent: nah, you can be that big, tops! - the outer outer grandparent: you kids and your sizing rules must fit in here But sometimes you place stuff in a canvas and the canvas is that granddaddy that lets anyone do what they want and say Size To Content as you wish, not going to hold you back. * * * There is also something in UMG called `Clipping` - its rules control how content spills out of containers: Can be handy if you do not care or cannot care about the size because you may not know it upfront. Like a magical sword with a couple of procedurally generated prefixes and affixes. * * * And a note about spacers since we have some around now. They’re _fine_ but they WILL clutter the hierarchy of complex widgets, and each widget you add adds to complexity and performance cost. In many instances you can get away with `padding` instead of a dedicated `spacer`. Those 2 images sit in a horizontal box but the right one wants 10px space from the top and left: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/c/5/bc556ab07362beeb21f5b79b8a3bc3e2367bd42b.png) Beats using a spacer imho. Especially that _every_ slot has this feature and some specialised slots have extras on top of that. This is actually another way to size things. We’re saying here that this image can be as big as the parent slot allows _but_ 10px must be preserved. Epic does not want you know this 😇 but padding can be negative: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/d/6/4d63bbe15b2780acda7279f83fe9f4d642cf0c65.png) If you now combine it with clipping mentioned above, you can rapidly get some cheap effects.