Nifty scroll panel is not clipping newly added panels

Troubleshooting gui
1

Hey everyone, the issue I’m having currently is that when I add a panel to the scroll panel, it’s recalculating everything correctly except clipping. The newly added panels are being shown under the scroll panel. Here’s a screenshot showing what I mean. Also, the code involved:

[java]Element panel = screen.findElementById(“myScrollStuff”);

panel.addChild(
        new PanelBuilder() {{
            width("100%");
            height("max");
            backgroundColor("#f00f");
            childLayoutHorizontal();
            valignCenter();
            
            text(new TextBuilder() {{

                width("*");
                wrap(true);
                font("aurulent-sans-16.fnt");
                color("#ffff");
                text(addTextField.getRealText());
                alignLeft();
                valignCenter();
                }});
            panel(new PanelBuilder() {{
                valignTop();
                backgroundColor("#fFFf");
                width("60");
                height("60");
            }});
        }}.build(nifty, screen, screen.findElementById("foreground"))
        );

    Element panelt = screen.findElementById("scrollbarPanel");
        panel.layoutElements();
        panelt.layoutElements();
        ScrollPanel panels = (ScrollPanel)panelt;
      
        panels.setUp(0, 5, 0, 50, AutoScroll.OFF);[/java]

xml:

[java]<panel width=“423” childLayout=“vertical” backgroundColor="#444f" align=“center” valign=“center”>
<control id=“scrollbarPanel” style=“special-scrollpanel” name=“scrollPanel” horizontal=“false” height=“400” width=“100%” childLayout=“vertical”>
<panel id=“myScrollStuff” width=“100%” childLayout=“vertical”>
<panel width=“100%” height=“max” backgroundColor="#f00f" childLayout=“horizontal” align=“center”>
<panel valign=“top” backgroundColor="#0f0f" width=“60” height=“20”/>
<text valign=“center” width="" style=“nifty-label” backgroundColor="#00ff" color="#000f" wrap=“true” text=“Ut non pretium urna. Ut faucibus dt sapien, eu ornare ligula turpis eu velit.”/>
<panel valign=“center” backgroundColor="#0f0f" width=“20” height=“30”/>
<text valign=“center” width="" style=“nifty-label” backgroundColor="#00ff" color="#000f" textHAlign=“left” wrap=“false” text=“I have newlines but no wrap!. ${CALL.newline()}cus!”/>
</panel>
<panel height=“50”/>
<panel width=“100%” height=“max” backgroundColor="#f00f" childLayout=“horizontal” align=“center”>
<panel valign=“center” backgroundColor="#0f0f" width=“60” height=“60”/>
<text valign=“center” width="" style=“nifty-label” backgroundColor="#00ff" color="#000f" wrap=“true” text=“Ut non pretium urna. Ut faucibus diam eu commodo auctor. Phau ornare ligula turpis eu velit.”/>
</panel>
<panel height=“50”/>
<panel width=“100%” height=“max” backgroundColor="#f00f" childLayout=“horizontal” align=“center”>
<text valign=“center” width="" style=“nifty-label” backgroundColor="#00ff" color="#000f" wrap=“true” text=“Ut non pretium urna. Ut faucibus diam eu commodo auctor. nunc feugiat sapien, eu ornare ligula turpis eu velit.”/>
<panel valign=“top” backgroundColor="#0f0f" width=“60” height=“60”/>
</panel>
<panel height=“50”/>
<panel id=“panelhere” width=“100%” height=“max” backgroundColor="#f00f" childLayout=“horizontal” align=“center”>
<text valign=“center” width="*" style=“nifty-label” backgroundColor="#00ff" color="#000f" wrap=“true” text=“Ut non pretium urna. Ut faucibus diam eu commodo auctpien, eu ornare ligula turpis eu velit.”/>
</panel>
</panel>

            &lt;/control&gt;
            &lt;panel width="100%" childLayout="horizontal"&gt;
                        &lt;control id="addTextField" name="textfield" maxLength="200" /&gt;
                        &lt;control id="appendButton" name="button" label="Send" /&gt;
            &lt;/panel&gt;
    &lt;/panel&gt;[/java]

Any help would be greatly appreciated! Once I get this clipping issue solved, the chat panel should be just what I need!

2

Thanks for your email that I’ve answered a couple of minutes ago :slight_smile:

Here is an except from the email if someone else encounters the same issue:

I think the problem is this line:

Element panel = screen.findElementById(“myScrollStuff”);

The scrollPanel will use several elements internally to build up the scrollbars and content and so on. The actual element that is the parent of the real content that will be scrolled is a sub element with the id “#nifty-scrollpanel-child-root”

So, to dynamically add content you’ll want something like:

Element scrollbarPanel = screen.findElementById(“scrollbarPanel”);
Element contentParent = scrollbarPanel.findElementById("#nifty-scrollpanel-child-root");

and then use contentParent as the parent for any new content.

It’s a bit cumbersome since in the controlDefinition Nifty will automatically move it to the right child element. If you look at the “nifty-scrollpanel.xml” inside the controls project I think it will be obvious how this works.