Nifty XML: Fill empty space in horizontal layout

Hi,
this may be a stupid question but I can’t find what I did wrong:
The nifty manual says “This will change the width of the first panel to 25px while the second panel - that we‘ve not set a width for - automatically takes up the remaining space.” in the case you do not set a width for elements in a horizontal layout.
This is exactly what I want: The map should show up on the left side of the screen (which works) and a panel with additional information (“sidebar” in my code), buttons etc should fill the rest of the screen right of the map. But it is just not visible.

Here is my XML:

<layer childLayout="horizontal">
            <panel id="groundmap" width="100%h" visibleToMouse="true" childLayout="center">
                <interact onMouseOver="onCursorOverMap()" onClick="onMapClicked()"/>   
                <image filename="Interface/images/minimapBG_wood.png" visibleToMouse="false" height="100%" width ="100%"/>
            </panel> 
            <panel id="sidebar" backgroundColor="#88f8" />
        </layer>

Thank you in advance for any help :wink:

I don’t know where you are quoting from in the Nifty Manual because your code doesn’t match what you said…

<layer childLayout="horizontal">
        <panel id="groundmap" width="100%h" visibleToMouse="true" childLayout="center">
            <interact onMouseOver="onCursorOverMap()" onClick="onMapClicked()"/>   
            <image filename="Interface/images/minimapBG_wood.png" visibleToMouse="false" height="100%" width ="100%"/>
        </panel> 
        <panel id="sidebar" width="25px" backgroundColor="#88f8" />
</layer>

You need to set a width for that panel. If that doesn’t work you can set the width of the first panel to ‘*’ and it should.

Hi,
maybe I didn’t express right what I wanted to say^^
I am referring to the top of page 52 of the nifty manual (1.3.2). As an example two panels are used, a red and a green one. While the green panel has a fix width of 25px the red panel fills all the rest of the screen. Thats exactly what I want:
The map is shown the left side of the screen and has a fix width (100%h). The sidebar should have the remaining space (where you can see the actual 3d rendering now) as width.

I did already try using “*” as width for the sidebar but it doesnt change anything.
See screenshot:

Is this what you are looking for? I think “100%h” isn’t valid and should be “100%”.

<layer id="layer" backgroundColor="#003f" childLayout="horizontal">
  <panel childLayout="center" width="25px" height="100%" backgroundColor="#0F0F">
  </panel>
  <panel childLayout="center" width="*" height="100%" backgroundColor="#f00f">
    
  </panel>
</layer>

Now I did try it with a fixed 200px value, just like you did and it works… Still that’s only half of the way. I don’t get why “100%h” does set width of the first panel as it should (100% of its height) but the second panel can not just be stretched over the rest… If I set a fix vaule (like “20%”) for the sidepanel it works…
Thank you for your help so long, I will now think of a way how to set the sidepanel’s with on the right side without touching the code for the map… The map has to stay a square… Guess I will have to call a java method to get the right width for the sidepanel. I hoped I could avoide that :frowning:

I guess I am still confused as to what you are trying to do. Are you trying to create a minimap in the corner of the screen or something?

In my experience this will work but I believe you still need to set an actual height value, try height=“100%” or just height=“50px” for example.

@DannyJo I already did try that, no change :frowning:

@glh3586 The map is opened when the player presses the tab key. It should show the map itself (like it does). On the right side of the screen you should have buttons to select a tool (build buildings, modify terrain, etc) and use it on the displayed map. Additionally I want a panel visible that shows information on the field the cursor hovers on the map. The game will be some kind of first person citybuilder :wink: