Width="*" behaves strangely

I’m having some issues with width="". I create a textfield in a panel, and give it width="".

[panel childLayout="horizontal" height="70%" id="contentPanel" width="*"]
    [control childLayout="center" id="content" label="content" name="textfield"
                                             textVAlign="center" valign="center" width="*"/]
[/panel]

If I just do that, I can see it is there, but just a tiny speck, a few pixels wide. And it doesn’t “grow” when I set text in it.

If I add something like text=“content” in the XML, it gets big enough to hold that, but still not use up all the width, and does not grow to accommodate bigger content.

Is that “normal”?

EDIT: I also tried width=“200px” and width=“90%” but still the same effect; if I don’t specify any text= then it has a “zero size”.

Has it possibly got something to do with this message:

WARNING: You’re using a centerLayout element but you’ve added more than one child element to it. centerLayout only supports one element! Odd things will happen when used with more than one element :slight_smile:

Which comes a lot, but doesn’t actually say anything useful, because I have lots of panels/controls and I see no way of knowing which one would be wrong (I checked, I could not find an instance of “center” where there was multiple children).

which version of the SDK are you using?

Hi.

The Help/About says: “Product Version: jMonkeyEngine SDK 3.0RC2”
If there is a more specific build number somewhere, I don’t know where it is.

I did not actually expect it was a bug, but rather me just being stupid …

The main problem here is that “width=”*"" depends on its parent’s width definition. This is, afaik, a bug with nifty as this should use the default size. Of course it might be a bit more complex, but I have seen similar behavior.

So, make sure the parent of that panel has a defined width.

As for your warning… This is yet another instance of a huge Nifty problem. Warning/Info spam. My suggestion to you is to cut/paste part of your screen until the warnings disappear then add parts of it until you get a warning. Fix it, then continue until it’s clean.

1 Like

Forgot to add.

You can also use the following to validate your XML, but this has been known to be finicky… It mostly doesn’t like “[useStyles …]” and other commands in then XML file.

[java]
nifty.validateXml(“Interface/hud.xml”);
[/java]

This should give you a bit more information on the “problems”…

1 Like
  • has a specific meaning in Nifty. It says to use all the remaining width.

i.e. in a horizontal layout panel 400 pixels wide then if you had two panels of 50 pixels then one width * you would then get 300 pixels wide. If you added another 25 pixel panel then the * width one would shrink to 275.

OK. I understand the warning might not be a real issue, and is probably unrelated.

About the issue itself, do I understand correctly that, the problem is that the panel that is the parent of the textfield also has width="", and that is what confuses Nifty? And so the solution is that only the lowest level child should have a width="", for things to work correctly? I tried that after reading your answers, and it had no effect. Then I just used a fixed width everywhere, and the textfields where still size 0, unless I set a text="…" attribute in them. So it’s probably some other issue. For the time being, I’ll just set the text="" attribute to 100 whitspaces in the XML file.

One other strange symptom is, that when the fields are finally visible, and I click in them, I can edit the content, but the blinking cursor somewhere completely different, in the middle of nowhere. In fact, it is only visible when I’m in a textfield, and seems to be as far from the upper-left corner of the screen, horizontally, as the cursor is far into the textfield.

I think I’ll try to create a minimal test-case, and come back here with it, if I can’t work it out.

Width * only makes sense is parent layout is horizontal. Height * if parent layout is vertical.

OK. I have a simplified test case of my “listbox” issue. Not sure if it is related to the original issue I had, but I think I should work them out one at a time.

mygame/Main.java:

    public void simpleInitApp() {
        NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager,
                inputManager, audioRenderer, guiViewPort);
        Nifty nifty = niftyDisplay.getNifty();

        try {
            nifty.validateXml("Interface/test.xml");
        } catch (Exception ex) {
            ex.printStackTrace();
        }

        nifty.fromXml("Interface/test.xml", "test");
        guiViewPort.addProcessor(niftyDisplay);
        nifty.gotoScreen("test");
    }

Interface/test.xml:

[<?xml version="1.0" encoding="UTF-8" standalone="no"?]
[nifty]
    [useStyles filename="nifty-default-styles.xml"/]
    [useControls filename="nifty-default-controls.xml"/]
    [screen childLayout="horizontal" id="test" controller="mygame.TestController"]
        [layer childLayout="absolute"]
            [panel align="center" childLayout="vertical" height="90%" width="50%" x="175" y="25"]
                [control childLayout="center" height="50%" id="assetsBox" name="listBox" width="*"/]
            [/panel]
        [/layer]
    [/screen]
[/nifty]

The nifty.fromXml("Interface/test.xml", "test"); line just causes:

org.xml.sax.SAXParseException; cvc-elt.1: Cannot find the declaration of element 'nifty'.
	at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:198)
	at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.error(ErrorHandlerWrapper.java:134)
...

which makes no sense, since the file has the nifty element, and I can even see the GUI when the program runs.

And now for the effect, there is some weird squashed scrollbar at the top left, which should not be there.

OK. Now for the text field (Same code as before):

Interface/test.xml:

[<?xml version="1.0" encoding="UTF-8" standalone="no"?]
[nifty]
    [useStyles filename="nifty-default-styles.xml"/]
    [useControls filename="nifty-default-controls.xml"/]
    [screen childLayout="horizontal" id="test" controller="mygame.TestController"]
        [layer childLayout="absolute"]
            [panel align="center" childLayout="vertical" height="90%" width="50%" x="175" y="25"]
                [control childLayout="center" id="nameField" label="nameField" name="textfield"
                             textVAlign="center" valign="center" width="*" text="XXX"/]
            [/panel]
        [/layer]
    [/screen]
[/nifty]

And the result:

As you can see, I got the focus of the field automatically, edited the “XXX” into “ab” and one can see the cursor is a small distance from the top left of the screen, which from experience I found is as far as I am far into the text field.

Also, you can see that, despite the fact that I specified width="*" I still get a field just big enough for the “XXX”.

This is quite a simple example, so I’m hoping whatever I do wrong should now be obvious, and if I do nothing wrong, then this could serve as a test-case for creating a “nifty issue” (if they have an issue tracker :-? ).

@zarch I disagree with your statement. A width or height ="" can be used in any way. Not just with horizontal/vertically aligned children. What if you have a panel/layer that have static size controls inside but the panel itself isn’t? You’d get a leftover, which is exactly what the "" is all about.

@monster I suspect the validator is being anally retarded about XML/NIFTY tags.

Those that are used in my own XML files are these lines:
[xml]
[?xml version=“1.0” encoding=“UTF-8”?]
[nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd”]

[/xml]

@madjack Thanks! With the proper namespace, the validator told me that:

Attribute 'childLayout' is not allowed to appear in element 'screen'.
So I removed it, but it did not solve any of the real issues.

At least the validator works. Nothing else pops up? No warning, error?

No, I surrounded the validator call with System.out, and it prints nothing anymore, after removing childLayout from screen.

I did find what’s up with the listbox; the thing in the corner is the “misplaced” horizontal scrollbar. If I turn it off with: horizontal=“off” then it disappear.

I tried using maxLength on the text field to at least give it a fixed size, but this also did not affect the visible size (although it might work for actually checking how many characters I typed in it). Maybe maxLength is not related to size anyway. :-?

Got it! It’s the childLayout=“center” parameter! If I remove that, the controls behave normally. :slight_smile:

Well, yeah. If the childLayout is set to center, it’s likely it’ll lead to alignment problems. Btw I haven’t tried to workaround or find the problem on my side, but that sounds like the solution.

@madjack said: @zarch I disagree with your statement. A width or height ="*" can be used in any way. Not just with horizontal/vertically aligned children. What if you have a panel/layer that have static size controls inside but the panel itself isn't? You'd get a leftover, which is exactly what the "*" is all about.

It’s not about the child layout, its about the parent layout.

If you have an element width * then the parents layout must be horizontal, height * parent layout must be vertical.
If you think about it - center, overlay, absolute…in none of these does “the remaining space” make sense.

If you use a width/height = “*” the only needed ingredient is to have a defined width or height, but the alignment doesn’t have to be vertical or horizontal. Although I’ll admit center won’t make a difference or be relevant.

In any case, the parent’s alignment definition should override a child’s if there is a conflict, which obviously isn’t done here. Nifty will just try to accommodate whatever is demanded, or it will silently fail or… whatever.