How to align table in scrollPane top?

Question

I' am making achievements screen in my libgdx game. I want to align my table in scrollPane to top, now it is centred vertically and horizontally and I don't know why. Using .top() method when I've tried to create new row didn't worked.

stage      = new Stage();
    Gdx.input.setInputProcessor(stage);
    outerTable = new Table();
    innerTable = new Table();



    innerTable.setFillParent(true);



    for(int i=0;i<score_bound; i++){

        if(i<score_state){
         innerTable.row().width(achie_width).height(achie_height).top();

         innerTable.add(new Image(ltm.assets.score_textures[i]));
        }else{

            innerTable.row().width(achie_width).height(achie_height).top();

             innerTable.stack(new Image(ltm.assets.score_textures[i]),new Image(ltm.assets.kurtyna));

        }

    }

    for(int i=0;i<letin_bound; i++){

        if(i<letin_state){
             innerTable.row().width(achie_width).height(achie_height).top();

             innerTable.add(new Image(ltm.assets.letin_textures[i]));
            }else{

                innerTable.row().width(achie_width).height(achie_height).top();

                 innerTable.stack(new Image(ltm.assets.letin_textures[i]),new Image(ltm.assets.kurtyna));

            }

    }

    scrollPane = new ScrollPane(innerTable); 


    outerTable.setPosition(0, 0);
    outerTable.setSize(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());



    outerTable.debug();

    outerTable.add(scrollPane).fill().expand();


    stage.addActor(outerTable);

Rentier

Try to change outerTable.add(scrollPane).fill().expand(); to outerTable.add(scrollPane).fill().expand().align(Align.top); – Prochronism

Answer 1

I run into the same issue today and came across here, so I might as well post an answer here in case somebody is still looking for an answer.

@peterSweter said top() does not work, what @Rara suggested is the same as calling top.

The only way to achieve something that looks like an align to the top - which only is relevant if the innerTable is smaller - is to increase the size by adding empty elements around it, so the table you pass to the ScrollPane has at least the same size as the scrollPane.

I just wrapped yet another Table around my innerTable reference. (658 is the fixed height I use for my ScrollPane)

    Table spacingTable = new Table();
    spacingTable.setHeight(Math.max(innerTable.getHeight(), 658));
    spacingTable.add(innerTable);

    if (innerTable.getHeight() < 658) {
        spacingTable.row();
        spacingTable.add().expandY();
    }

    ScrollPane scroll = new ScrollPane(spacingTable, skin);

Gelderland

Answer 2

In order to achieve what you want, you can wrap your table inside another table and use that table for ScrollPane. Note that when adding your table to container table, you'll need to add some growable, empty cell at the bottom and right side in order to "push" it to top-left (although I believe you can also simply use containerTable.add(myTable).top().left() - but haven't tested it really). This of course is a much better solution than second's solution, which uses hardcoded height. The thing is, you will usually want to add scroll pane as growable (.grow()), so fixed height/width is useless.

Discharge