Nifty Scrollpanel Forces A White Background With Text Rendering Issues

I’ve had an issue for a while where adding in a scroll panel to a panel fills its contents with a white background and renders the text painful to read. The code:

//This code builds the window
control(new WindowBuilder(screenID + "SelectedElementWindow", "Selection") {{
                  closeable(false);
                  width("320px");
                  height("50%");
                  
                  panel(new PanelBuilder(screenID + "OutputPanel") {{
                         childLayoutHorizontal();             
                         alignCenter();
                         width("100%");
                         height("100%");

                       //The following line and its associated closing brackets are conditionally commented out:
                        // control(new ScrollPanelBuilder(screenID + "SelectedOutScrollbar"){{
                            
                            panel(new PanelBuilder(screenID + "OutScrollbarPanel") {{
                                childLayoutVertical();            
                                width("100%");
                                height("5000px");
                                
                                text(new TextBuilder(screenID + "SelectedOutputText"){{
                                    text("No current element");
                                    font("Interface/Fonts/Default.fnt");
                                    width("100%");
                                    height("100%");
                                    wrap(true);
                                }});
                            }});
                        //}});
                    }});
                }});

//This code calls sets the text:

TextRenderer tRender = skirmishScreenSelectedOutputText.getRenderer(TextRenderer.class);
      tRender.setColor(Color.WHITE);
      tRender.setLineWrapping(true);
      
      tRender.setText(nullElementText);

The left side is the output of the code as written; the right side uncomments the scroll panel definition.

As you can see, the scroll panel fills it out with a white background and places a black box around each letter. I’m making no other changes to it in the code, so I’m at a loss as to where the fill occurs. The text boxes make it not quite a white-on-white background (using black text makes it unreadable).

If you put a background color on the OutScrollbarPanel (the panel inside the scrollbar), the result overwrites both the white text color and the white background, but the black boxes around the text remain. That’s the only change in the following pictures. As before, the right side has the scroll bar commented back in (yes, I know the left side’s panel falls off the window).

EDIT: Changing the text color with a background fill has a variable effect on the resulting text color. Whereas black looks identical to having no background fill with black text (uniformly black letterboxes), white seems to have no effect at all. Using random colors has an intermediate effect; some don’t change much, others do but don’t stop it being red - I’d guess that there’s some issues with transparency going on.

A background fill on on OutputPanel (the outer panel) simply fills the rectangle at the lower right that’s colinear with both of the scrollbars with the color, and apparently does nothing else.

Something that I’ve thought of but haven’t tried is mucking around with the default styles or other Nifty defaults. I haven’t tried it, though - I’m not sure where to look for them. Moreover, since it was working before and I haven’t made any changes to those, I didn’t think it would be likely.

Since it overrides the white text and it also causes textbox transparency issues, I’d guess it to be related to the text rendering code. No idea where I’d start with that, though.

I’ve had the problem for a while. It started a few years ago, and I wasn’t sure what caused it then. I was focused on more fundamental logic within the engine, and was going to revamp the UI anyway so I thought my revamp would circumvent needing to fix the issue. The time’s come for the revamp, and it doesn’t look like it’s going away. If anybody else has any ideas, I’d appreciate hearing them.

(You may also notice that the window has an X in the upper right corner despite closeable being set to false, and that the inner scroll panel’s height is set to a ludicrously large size because I haven’t been able to get the scroll panel resizing properly. Help with either of those would be appreciated as well.)

Ah yes, I remember this issue from a good while back. For some reason the default style for Nifty Scroll-panels uses an opaque white background color with the blend mode set to multiply:

<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles>
  <style id="nifty-scrollpanel#scrollpanel">
    <attributes backgroundColor="#ffff" />
    <effect overlay="true">
      <onActive name="blendMode" blendMode="multiply" post="true" />
      <onActive name="imageOverlay" filename="blackborder.png" imageMode="resize:1,30,1,1,1,30,1,1,1,30,1,1" post="true" />
    </effect>
  </style>
  <style id="nifty-scrollpanel#bottom-right">
    <attributes width="23px" height="23px" />
  </style>
</nifty-styles>

To resolve this just create your own style named nifty-scrollpanel-style and load it after you load the default styles.

nifty.loadStyleFile("nifty-default-styles.xml");
nifty.loadControlFile("nifty-default-controls.xml");

nifty.loadStyleFile("Interface/Styles/MyStyles.xml");
nifty.loadControlFile("Interface/Controls/MyControls.xml");

You can do whatever with your style, but you’ll probably want get rid of the onActive blendMode deal and change the background color to transparent.

<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles>
  <style id="nifty-scrollpanel#scrollpanel">
    <attributes backgroundColor="#00000000" />
    <effect overlay="true">
      <onActive name="imageOverlay" filename="blackborder.png" imageMode="resize:1,30,1,1,1,30,1,1,1,30,1,1" post="true" />
    </effect>
  </style>
  <style id="nifty-scrollpanel#bottom-right">
    <attributes width="23px" height="23px" />
  </style>
</nifty-styles>

Another approach that worked for me, I’m not using scroll-panels anymore, was to create a custom style and just change the background color to transparent white:

<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles>
  <style id="cd-scrollpanel-style#scrollpanel">
    <attributes backgroundColor="#ffffff00" childClip="true"/>
  </style>
  <style id="cd-scrollpanel-style#bottom-right">
    <attributes width="16px" height="16px" />
  </style>
</nifty-styles>
1 Like

Thank you. That worked.