How to place images in the top left corner of a GridContainer?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Kakumi

Hello,

I have encountered a problem with my GridContainer. I would like to be able to add “cards” dynamically and place them on the top left for a total of 10 per row. Currently, the cards are positioned in the center because they take all the height. Can you help me? Is the GridContainer not suitable?

Thank you for your help.

https://postimg.cc/nsD1GCrL

:bust_in_silhouette: Reply From: Miguelino

Hi, do you have a visual example of what you wanna do?

In general remember that a grid container works by taking a column of nodes and setting up rows and columns based on the order they are placed for the node tree

This will be affected by how you set up your grid container (max amount of columns)

For example, let’s say you set up a max amount of columns of 3 and this is how you organize the tree:

Gridcontainer:
Node 1
Node 2
Node 3
Node 4
Node 5
Node 6

And we supposed these nodes are sprites for the cards you want to set up

The cards would appear like this on the screen:

Node1 Node 2 Node 3
Node 4 Node 5 Node 6

If you need to change the positions in game, you would need to use scripting, you can use the move child function

I hope this example is useful

Thank you, yes this is the issue here.

I want a grid with 10 columns but there are space between top and bottom because the texture rect take all the height (100% of grid container) With 2 rows, first row take 50% and second one is also 50% and so on… I want the image to only have a height that use the content of the texture rect (image’s heigt and width)

Here is what I want to do :
https://postimg.cc/PCMpNYMr
Black = grid container size
Red = image size
Blue = Texture rect size

Kakumi | 2023-03-05 21:58