Dynamic UMG Canvas Interaction

Hi guys,

I’ve trying to create a Dynamic UMG that populates a horizontal box with custom buttons in realtime and spawns it in the world.

I have the system working, minus one issue where the UI Canvas seems to be rendering a lot of nothing space around my menu, and I can’t seem to get rid of it.

I’m not sure on what i’m doing wrong, can anyone advise? I’ve attached what it looks like and my BP.

Thanks!

Removing the

Could you re-upload the 2nd image cropped, it’s nearly impossible to figure out what’s going on there. I can see 5 buttons in a horizontal box, but I’m not sure where the empty space you mentioned.

Also a screenshot of the hierarchy would help greatly.

Your message ends with Removing the… Sounds like something got cut off when you attached the images.

Apologies, i have no idea whats happened with that post!

I’m currently on another machine, but I can break down the setup and repost the images tomorrow.

Essentially, I have my Player Controller spawning a blueprint with a U.I Widget on it upon clicking certain elements (Floor, Walls etc) and positioning the U.I accordingly inside the world.

When pressed, the FPS controller looks to see what was hit (Line trace then check tags) and then triggers a custom event which is held in the U.I Designer Graph.

The U.I designer Hierarchy will be

UI

  • Canvas Panel
    • Horizontal Box

When the event is fired, it looks to see what value was passed through, and selected an array of materials. It then clears any existing buttons which are attached to a Horizontal Box, and then does a for each loop against the array of available materials, spawning a ‘Special Button’ class (Another U.I with just a Button and an event dispatcher to see which button was pressed) and then add child to horizontal box node.

I can imagine this is quite hard to visualize without images!

The black space I’m referring to is the nothing space around the buttons that spawn, it appears to be drawing a 1920x1080 invisible canvas, that is also acting as a collider for the Widget Interaction and blocking Line Traces.

I’ve tried removing the Canvas Panel and just having the Horizontal Panel sat below the UI in the Hierarchy but that doesn’t seem to work either.

Thanks for helping me with this!

It would help if you showed the widget hierarchy. Using canvas seems redundant here if horizontal box with 5 buttons is what you need. So what you’re saying is that the widget intercepts mouse input outside of the widget’s interactive area. This should not be happening, I’ll agree with that.

The black space I’m referring to is
the nothing space around the buttons
that spawn, it appears to be drawing a
1920x1080 invisible canvas, that is
also acting as a collider for the
Widget Interaction and blocking Line
Traces.

If you must use canvas, ensure it’s set to SelfHitTestInvisible and the HorizontalBox housing the buttons has SizeToContent ticked.

In the widget component, are you using screen or world mode? From the tiny pic it seems it’s the screen mode. Could you confirm? You mentioned Widget Interaction and spawning in the world so I’m assuming it’s a widget component we’re dealing with here.