LibGDX ScrollPane Showing Black Screen

Question

Situation:
First of all, I'm newbie in LibGDX.

I'm making a game where players may see all achievements in a screen, so I'm using a ScrollPane for this.

The achievements are shown in a form of pop up (see image below). The list of achievements will be inside those red lines.

Screenshot:

Problem:
The problem is: the screen only shows black screen when I added a widget to the ScrollPane.

The weird thing is:
- When I dragged the ScrollPane, everything is rendered properly.
- But when I let go, the screen goes black again.

What I've done:
- I figured out that any actors (not just table) I put inside the ScrollPane parameter will result in black screen.
- If I set it to null, it works fine.

Code:

public void show() {
    stage = new Stage();

    roomScreenUI = new RoomScreenUI();
    roomScreenUI.setName("RoomScreenUI");
    stage.addActor(roomScreenUI);

    roomScreenButton = new RoomScreenButton[5];
    for(int i=0; i<roomScreenButton.length; i++){
        roomScreenButton[i] = new RoomScreenButton(i+1, roomScreenUI.getScaleFactor());
        roomScreenButton[i].setName("RoomScreenButton");
        stage.addActor(roomScreenButton[i]);
    }

    roomScreenAchievementUI = new RoomScreenAchievementUI(roomScreenUI.getScaleFactor());
    roomScreenAchievementUI.setName("RoomScreenAchievementUI");
    stage.addActor(roomScreenAchievementUI);


    //----------------THE PROBLEM LIES HERE----------------//

    achievementContainer = new Table();

    scrollPane = new ScrollPane(achievementContainer);
    // scrollPane = new ScrollPane(null); <-- If I replace it with this line, it works fine

    //----------------THE PROBLEM LIES HERE----------------//

    achievementTable = new Table();
    achievementTable.setSize(roomScreenAchievementUI.getWidth() * 0.9f, roomScreenAchievementUI.getHeight() * 0.8f);
    achievementTable.setPosition(roomScreenAchievementUI.getX() + roomScreenAchievementUI.getWidth() / 2 - achievementTable.getWidth() / 2, roomScreenAchievementUI.getY() + roomScreenAchievementUI.getHeight() * 0.48f - achievementTable.getHeight() / 2);
    achievementTable.debug();
    achievementTable.add(scrollPane).expand().fill();
    achievementTable.setName("AchievementTable");
    stage.addActor(achievementTable);

    Gdx.input.setInputProcessor(stage);
}

public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    // ... code omitted ... //

    stage.act(delta);
    stage.draw();
}

Question:
Anyone has any ideas about what's going on?
And how do I fix it?
Thx in advance...

================================================================================== UPDATE ==================================================================================
After hours of experiment, I created a much simpler project with only a screen and an actor from a scratch:

TestActor.java (this is the actor)

Texture texture;
Sprite sprite;

public TestActor(){
    // I used the default generated image badlogic.jpg
    texture = new Texture(Gdx.files.internal("badlogic.jpg"));
    sprite = new Sprite(texture);
}

@Override
public void draw(Batch batch, float alpha){
    batch.draw(sprite, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}

TestClass.java (this is the screen)

Stage stage;
ScrollPane scrollPane;
Table outerTable, innerTable;
TestActor testActor;

@Override
public void show() {
    stage = new Stage();

    testActor = new TestActor();
    stage.addActor(testActor);

    //---------THE PROBLEM IS STILL HERE---------//

    innerTable = new Table();
    scrollPane = new ScrollPane(innerTable); // change it to null, it works

    //---------THE PROBLEM IS STILL HERE---------//

    outerTable = new Table();
    outerTable.setPosition(0, 0);
    outerTable.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    outerTable.debug();
    outerTable.add(scrollPane).fill().expand();
    stage.addActor(outerTable);
}

@Override
public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    stage.act(delta);
    stage.draw();
}

Also I figured out something that may be a clue while I was debugging:
- At the first frame, everything is rendered properly.
- Starting from second frame, the screen goes black.

Is this a bug?
Or is it something that I misunderstand?
Any help would be greatly appreciated...

Answer 1

Here is a workaround for one who still meet this error: try scrollpane.setFadeScrollBars(false);

Answer 2

Edit tray this code

example:

public class TestActor extends Widget {
Texture texture;
Sprite sprite;

public TestActor(){
    // I used the default generated image badlogic.jpg
    texture = new Texture(Gdx.files.internal("badlogic.jpg"));
    sprite = new Sprite(texture);
}

@Override
public void draw(Batch batch, float parentAlpha){

    Color color = getColor();
    batch.setColor(color.r, color.g, color.b, color.a * parentAlpha);

    batch.draw(sprite, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}

}