Download

Uniform Grid Panel setup

I’m setting up a grid with a dynamic number of widgits inside it, however, when using the Uniform Grid Panel, all of the widgets created and assigned as a child appear full screen and stack on top of each other, instead of appearing in a grid formation. My guess at the problem is that these child widgets are all a combo of image and text inside a Canvas Panel, which is itself full screen. Is there a way to create a panel that isn’t full screen, and can still scale based on resolution?

…if not then im ok with dropping the scaling part of it for now…but still need a solution to the panel size…I think…

Has anyone else encountered the same issues or have any ideas what might be going wrong with my Grid?

Thanks.

Welcome to the forums.

If you want a widget to have a specific size, you can place it on a canvas; in addition, this will allow you to control its position (amongst other things). Here is an example of a *UniformGrid *sitting on the canvas (inside a border to make it pretty). The grid widget:

82f22a2925446b2bc5152cef197efc5db1b8a427.png

When you add children to a *UniformGrid *you’ll need to specify which column & row they occupy. If you add children manually, you can set it up in the details panel of every child (as default they sit at [0,0] I think - so yeah, they will stack on top of one another). If you spawn them dynamically, which is your case, you’ll need to assign row & column as you populate the grid.

Here is a child widget I’m going to add to the UniformGrid → [wGridChild]:

  • padding in the widget root [wGridChild] will prevent it from touching other children
  • the border will keep whatever you place inside centred, according to the alignment settings and padding

1881710c83cbfd81d7a1a412641ee56e818a7ca5.png

And this is how you can put it together, including setting up columns and rows as well as defining horizontal & vertical alignment in the *UniformGrid’s *slots:

graph.jpg

…which produced this:

end.png

If you have any additional questions, keep them coming.

Never mind, got it to work! Thank you very much!

This worked great for me. Very easy to understand. Much appreciated!

It worked for me too! Thank you very much, Everynone!

[QUOTE="
If you have any additional questions, keep them coming.[/QUOTE]

How do you make the items clickable? I have populated my grid with icons from a data table but I’d like to click on the icon to set a variable that can be cast out to my player character. I can’t even get hover events. Any help would be greatly appreciated as I have been all over the internet looking for answers. Thanks!

I set this up - it all works except my grid child widgets are not square, they are rectangles, even though I have them as square in the child widget blueprint. I cannot find any place that specifies what the size or shape of the child widgets are?

There isn’t one. It’s the parent that formats the children; they conform to whatever desired size the parent has. You have 2 options:

  • make the parent square and have an even number of both rows and columns, this will ensure shape uniformity as they will want to fill all available space evenly
  • wrap each child with a SizeBox and apply overrides - this will force the parent to respect its children’s needs

To make “items clickable” inside grid, you are going to have to actually add a button inside the clickable widget, and bind an event dispatcher to it. After that when filling the grid you want to bind the custom event to it.
You can also pass along the self reference of a clickable widget through event dispatcher to be able to access it.
This is the example:

How would I go about doing the same thing but adding/removing one child widget at a time?

This is what I have currently for adding Widgets to a Grid Panel, but sizing is all out of wack, and I don’t know how to cleanly remove a widget.

3f18409f4bd8b9f7bae76b13aedbec56ff290908.png

  • what’s the trigger for widget removal
  • are you removing from the end
  • are you adding *or *inserting

But first of all, if you’re going to have an uneven and dynamic number of elements, you should consider a WrapBox - much more suited to that kind of thing as it handles the row/column automatically. Not sure what this is going to be used for so this advice my not be that great.

I know this is old, but my question is, what is the node that inputs the main widget, and outputs the uniform grid? The only node I can drag off is “Slot as Uniform Grid Slot” which isn’t what I want.

Can you clarify? Do you mean AddChildToUniformGrid?

No, the node that is connected to the Target of AddChildToUniformGrid

That’s the Uniform Grid Panel itself - you can see it in the very first pic I posted - called *Uniform Grid Panel *sitting in the border.

If your widget hosts one of those panels, you can access it first by dragging a wire from Create Widget’s Return Value and searching for it. Once you’ve accessed the panel, you can start adding children. [HR][/HR]
If you can’t see it, ensure it’s flagged as *isVariable *first:

Annotation 2020-07-09 144300.jpg

This will expose it. Some widgets are not exposed by default.

Ah, that worked! Thank you!

I do have a follow up, are your borders transparent? Every time I try to make a similar thing, I just have a completely filled white border from the main widget.

Aye, force of habit. Looks like a 0,0,0 black brush with .25 alpha from here.

Hopefully final question XD

Is there a method to make the padding between all the children remain the same no matter how many columns there are? I’m just using a single row with a varying number of columns, and I want the space between all the children to be the same no matter the number of columns.

EDIT: I see a minimum children padding distance, but I also need a maximum distance, which I don’t see.

Hello!

Bumping this a bit.

How could I use this to populate the grid with assets selected from Content Browser in an Utility Widget Blueprint. THanks