Libgdx ScrollPane adding space at the top

Question

I'm creating a store for my game and I'm having issues with the libgdx ScrollPane. It seems to be moving the table within it down by 155px. The effect it's having is that the table appears roughly 155px down from the top, and the last button is off the screen no matter how far down I scroll.

Here is the window when the "Store" first appears.

As you can see the top of the table is quite a bit below the top of the window. Code below, but the table only has 10px of padding.

Here is the window when I've scrolled down as far as I could go - sorry, the scroll pars disappeared before I could grab the screenshot.

You can see that the "Main Menu" button is about half way off the screen.

Here is the code that lays out the "Store".

table = new Table();
table.setFillParent(true);
table.defaults().expandX().fill().space(5f);
table.pad(10f);

// characters
table.add(new Label("Characters: ", skin, "default")).left().colspan(2);
table.row();
ButtonGroup characterGroup = new ButtonGroup();
characterGroup.setMaxCheckCount(1);
Button boyButton = createImageTextButton("Plain Boy", boyTexture);
Button catButton = createImageTextButton("Cat Girl", catTexture);
Button hornButton = createImageTextButton("Horn Girl", hornTexture);
Button pinkButton = createImageTextButton("Pink Girl", pinkTexture);
Button queenButton = createImageTextButton("Queen", queenTexture);
float minHeight = 130f; // only used to force scrolling.
table.add(boyButton).minHeight(minHeight);
table.add(catButton).minHeight(minHeight).row();
table.add(hornButton).minHeight(minHeight);
table.add(pinkButton).minHeight(minHeight).row();
table.add(queenButton).minHeight(minHeight).colspan(2);
table.row();
characterGroup.add(boyButton, catButton, hornButton, pinkButton, queenButton);
characterGroup.setChecked("Plain Boy");

// drills
ButtonGroup drillGroup = new ButtonGroup();
Button flappyButton = createImageTextButton("Flappy", null);
Button tappyButton = createImageTextButton("Tappy", null);
Button tiltyButton = createImageTextButton("Tilty", null);
table.add(new Label("Drills:", skin, "default")).left().padTop(20).colspan(2);
table.row();
table.add(flappyButton).minHeight(minHeight);
table.add(tappyButton).minHeight(minHeight).row();
table.add(tiltyButton).minHeight(minHeight);
drillGroup.add(flappyButton, tappyButton, tiltyButton);
drillGroup.setChecked("Flappy");

// main menu button
table.row();
Button mainMenuButton = createImageTextButton("Main Menu", null);
table.add(mainMenuButton).minHeight(minHeight).padTop(40).padBottom(10f).colspan(2);

ScrollPane scrollPane = new ScrollPane(table, skin);
scrollPane.setBounds(0, 0, stage.getWidth(), stage.getHeight());
addActor(scrollPane);

I debugged the desktop version and saw that the table's y position was set to -155 before I scroll, and set to 0 after I scroll to the bottom. However, even when it's set to 0, the last button is always partly off the screen.

As requested here is the code where I create the viewport and camera:

package com.example;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.utils.viewport.ExtendViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.example.stages.GameStage;

public class MainGame extends ApplicationAdapter {

    public static final int MIN_WIDTH = 480;
    public static final int MIN_HEIGHT = 800;

    public static SpriteBatch batch;
    public static GameStage game;
    public static Skin skin;
    public static Viewport viewport;
    public static Stage stage;

    @Override
    public void create() {
        viewport = new ExtendViewport(MIN_WIDTH, MIN_HEIGHT);
        batch = new SpriteBatch();
        initSkin();
        game = new GameStage(viewport, batch, skin);
        setStage(game);
    }

    @Override
    public void dispose() {
        super.dispose();
        game.dispose();
        skin.dispose();
    }

    public void initSkin() {
        skin = new Skin(Gdx.files.internal("skins/uiskin.json"));
    }

    @Override
    public void render() {
        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        viewport.update(width, height, true);
    }

    public Skin getSkin() {
        return skin;
    }

    public static void setStage(Stage stage) {
        MainGame.stage = stage;
        Gdx.input.setInputProcessor(stage);
    }
}

Porky

@Townsnflok I think maybe the error is in another part of the code, because I think that code showing not reflect the behavior that you get, maybe you have modified the stage.getCamera, or the batch or perhaps something similar at some point, could review your code or/and add it to the question,. P.S: could also watch the viewport, is only my opinion – Illusage

I'll add the camera and viewport set up, but I'm not modifying it really, just setting up an ExtendViewport with a min size. – Porky

Answer 1

Ok, finally figured it out. Turns out the Table within the ScrollPane cannot be set to fill parent.

table.setFillParent(true);

Causes the issue. Not sure why it's doing that, but removing the setFillParent(true) fixes the issue.

Porky

Even with LibGDX 1.9.3 this is a problem -- I had a Label (with setFillParent) inside a ScrollPane and it had a huge gap at the top, too. Removed setFillParent, problem solved. Thanks! – Lowther