Centering a series of items

Troubleshooting gui
1

I’m trying to align a bunch of square images on the bottom, and I can’t seem to be able to center them all.
[java]
<layer id=“layer2” childLayout=“center”>
<panel id=“inventory” height=“10%” width=“100%” align=“center” valign=“bottom” backgroundColor="#f60f" childLayout=“center”>
<panel id=“inventory_center” align=“center” childLayout=“horizontal”>
<image id=“slot0” filename=“Interface/empty.png”></image>
<image id=“slot1” filename=“Interface/empty-unselected.png”></image>
<image id=“slot2” filename=“Interface/empty-unselected.png”></image>
<image id=“slot3” filename=“Interface/empty-unselected.png”></image>
<image id=“slot4” filename=“Interface/empty-unselected.png”></image>
<image id=“slot5” filename=“Interface/empty-unselected.png”></image>
<image id=“slot6” filename=“Interface/empty-unselected.png”></image>
<image id=“slot7” filename=“Interface/empty-unselected.png”></image>
<image id=“slot8” filename=“Interface/empty-unselected.png”></image>
<image id=“slot9” filename=“Interface/empty-unselected.png”></image>
</panel>
</panel>
</layer>[/java]

Is there some example that I can look at to see what I’m doing wrong?

2

I could be wrong but I think you need to set an explicit width on your “inventory_center” panel. If that’s not it I would try setting the background colors to a solid color of some sort. This can help you tell where each panel actually exists on the screen. I used that technique extensively to figure out alignments using nifty.

3

You don’t need an explicit width, or at least adding width=“100%” made no difference.

Since I know how many items will be there, and the size of each item, I simply set the width to the total pixel value. However, this won’t work if you have a dynamic amount of items.

4

Well I think the problem is that it defaults to 100% width. Try setting something smaller. Right now your inventory panel is 100% width and is trying to center the “inventory_center” control but it is 100% width so it doesn’t do anything differently.

5

Setting it to a smaller value will center the panel. Since setting childLayout=“horizontal” lays out the elements inside from left to right, it really has no effect on whether the items inside the panel are centered or not. If I didn’t know how big the contents of the panel were, I would not be able to center those items. It would be nice to have a width=“wrapChildren” option.

I’m going to set this to resolved, simply because figured out how to solve it for my situation.

6

Yea, its really not ideal. I had a lot of work arounds like that but ultimately it gets the job done.