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?
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:
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
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:
[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:
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.
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:
This will expose it. Some widgets are not exposed by default.
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.
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.
