Nifty: Layouting problem (empty space)

Hi,

I’m facing a (in my eyes wierd) problem with the nifty layouting. It seems, that nifty puts empty space between my during runtime created elements:

The XML-Definition of the container is this:
[java]<popup id=“gameFinishedPopup” childLayout=“center” backgroundColor="#000f">
<panel id=“gameFinishedPanel” width=“80%” align=“center” childLayout=“vertical”>
<text text=“Game Finished” font=“Interface/Fonts/Default.fnt” color="#ff0f" width=“100%” height=“20%” />
</panel>
</popup>[/java]

And each element (a row) is defined like this:
[java] new PanelBuilder(“GameFinishedPlayerElement_” + player.getName()) {
{
width(“100%”);
height(“20%”);
childLayout(ChildLayoutType.Horizontal);

            text(new TextBuilder("Rank") {
                {
                    align(Align.Center);
                    valign(VAlign.Center);
                    width("10%");
                    height("100%");
                    font("Interface/Fonts/Default.fnt");
                    color("#ffff");
                    text(rank + ".");
                }
            });
            panel(new PanelBuilder("Icon") {
                {
                    width("20%");
                    height("100%");
                    backgroundColor(convertColor(player.getColor()));
                }
            });
            text(new TextBuilder("Name") {
                {
                    align(Align.Left);
                    valign(VAlign.Center);
                    width("70%");
                    height("100%");
                    font("Interface/Fonts/Default.fnt");
                    color("#ffff");
                    text(player.getName());
                }
            });
        }
    };[/java] 

The single rows are added to the gameFinishedPanel (during runtime) with the following code (where a GameFinishedPlayerElement is the panel from above):
[java] Element panel = popup.findElementByName(“gameFinishedPanel”);

    int rank = 0;
    for (Player player : game.getPlayersSortedByRank()) {
        rank++;
        GameFinishedPlayerElement playerElement = new GameFinishedPlayerElement(player, rank);
        panel.add(playerElement.getElement(nifty, screen, panel));
    }[/java] 

The same problem appears on another part of my GUI, that is created in a similar way.

Regards and thanks for help

Sorry for the double post, but is there a way to edit posts, because the images don’t work?
Edit: I just saw, that you are able to edit replies, but i miss the edit button for the first post.

Another Off-Topic question: Is it possible to have a preview of a post before you submit it?

Next try for the images:

Just quickly looking at your code it looks like it has to do with your “gameFinishedPanel”. It looks like it is defaulting to 100% and your child elements don’t completely fill that space. An easy way to push them together would be to add a panel with a height set as “*” which will fill the remaining space. You could also try setting the child elements to vertical align to the top. I’m not sure if that would push them together though.

I tried both of your tips, but the situation remains the same.

The composition code in the controller looks now like this:
[java] Element panel = popup.findElementByName(“gameFinishedPanel”);

    int rank = 0;
    for (Player player : game.getPlayersSortedByRank()) {
        rank++;
        GameFinishedPlayerElement playerElement = new GameFinishedPlayerElement(player, rank);
        panel.add(playerElement.getElement(nifty, screen, panel));
    }
    Element exitButton = createExitGameButton(nifty, screen, panel);
    panel.add(exitButton);
    panel.add(new PanelBuilder("SpaceFiller") {
        {
            width("100%");
            height("*");
        }
    }.build(nifty, screen, panel));[/java]

You are constructing your elements slightly incorrectly. After you call build the element is already added to the panel you pass in and you don’t need to add it yourself. So when you call your player.getElement() call you don’t need to add it to the panel. I think when you do nifty thinks there are 2 elements there so you are double adding them but only 1 renders. It’s a little weird. I tested it myself real quick so that should be it.

1 Like

Yes. This was the solution.
Thanks for your help!