Libgdx - Creating larger background for scrollpane

Question

I'm trying to create a scrollpane that has a background. However, I want the background to take up more than the area of the scrollpane. For instance, Here is my background and colored in red is where I want the scrollpane to be:

However, when I add buttons I get the following result:

How can I limit the actual scrollpane part to just a section (colored in red in the above picture)?

Here is what I have so far. I toyed around with spacing/padding but that did not produce any good results:

Skin skin = Resources.getSkin(Resources.SKIN_JSON);
container = new Table();
container.setSize(Resources.VIRTUAL_WIDTH, Resources.VIRTUAL_HEIGHT);
this.addActor(container);
Table table = new Table();
// table.debug();

final ScrollPane scroll = new ScrollPane(table, skin);
table.pad(10).defaults().expandX().space(4);
table.setSize(Resources.VIRTUAL_WIDTH, Resources.VIRTUAL_HEIGHT);

container.add(scroll).expand().fill().colspan(1);
container.row().space(10).padBottom(10);

Image background = new Image(Resources.getAtlas(Resources.SKIN_ATLAS).findRegion("main-panel-horz"));
container.setBackground(background.getDrawable());

TextButton button1 = new TextButton("Button1", skin);
table.add(button1);

table.row();
TextButton button2 = new TextButton("button2", skin);
table.add(button2);

table.row();
TextButton button3 = new TextButton("button3", skin);
table.add(button3);

table.row();
TextButton button4 = new TextButton("button4", skin);
table.add(button4);

Answer 1

What you need to do is pad the outer table to get its contents to fit in the region of the background that you would like. (Or you could alternatively pad the cell that you put the scroll pane in.)

If you use a 9-patch drawable for the background, the padding of the outer table will be done for you automatically. You could also specify a TextureRegionDrawable in your skin Json and use that as the background. That would also allow you to pad the table automatically.

You can easily get texture region drawables from the skin with skin.getDrawable(drawableName); --no need to create an intermediate Image just to create a drawable out of a region.

Here's how you would create a TextureRegionDrawable with explicit padding in json:

com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable: {
    main-panel-horz-padded: { region: main-panel-horz, leftWidth: 50, rightWidth: 50, topHeight: 50, bottomHeight: 50 }
},

Then in your code: container.setBackground(skin.getDrawable("main-panel-horz-padded"));