Scene2d scrollbar not showing even though it exists in uiskin.json/atlas

Question

Using uiskin.json, uiskin.png, uiskin.atlas, default.fnt from libgdx tests I'm trying to make a console window, however the scroll bar is not shown. uiskin atlas contains a two relevat fragments:

default-scroll
  rotate: false
  xy: 78, 29
  size: 20, 20
  split: 2, 2, 2, 2
  orig: 20, 20
  offset: 0, 0
  index: -1
default-round-large
  rotate: false
  xy: 57, 29
  size: 20, 20
  split: 5, 5, 5, 4
  orig: 20, 20
  offset: 0, 0
  index: -1

Which are referenced in uiskin.json

com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
    default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, vScrollKnob: default-round-large }
}

And this is my console window:

//Skin is above mentioned uiskin.json, png, atlas
Window window = new Window("CONSOLE", skin);
window.padTop(20f);
window.setWidth(500f);
window.setHeight(250f);
window.setMovable(true);
window.setModal(true);
window.setResizable(true);
window.defaults().expand().fill();

Label consoleLog = new Label("TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT" +
                             "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT", skin)


consoleLog.setWrap(true);
ScrollPane scrollPane = new ScrollPane(consoleLog);
window.add(scrollPane);
window.row();
window.add(new TextField("", skin));

When I run this, I get a window with a label and a textfield, and I can scroll the label using mouse scroll or by dragging the text, but the scrollbar is not visible.

what am I doing wrong?

Answer 1

The cause of this problem is actually the way I constructed the ScrollPane object. I called the ScrollPane(widget) constructor without providing the skin which constructs the ScollPane like this:

public ScrollPane (Actor widget) {
    this(widget, new ScrollPaneStyle());
}

this basically means that for styling the ScrollPane it uses an empty ScrollPaneStyle which, among other things, doesn't have any images set for scrollbars.

So to fix that I just added the missing skin reference while constructing the ScrollPane.

ScrollPane scrollPane = new ScrollPane(consoleLog, skin);

And now the scrollbar displays properly.