# Centering a textbutton in a table libGDX

I have a few Tables spread across a Stage, now I have a problem. In one table, all the TextButtons are centered, while in a different one they aren't, like this:

Table 1           Table 2
XXXtextXXX        text
XXmoretxXX        moretext
XXXXtxXXXX        MoreTextHere


The problem is that as much as I try I can't seem to center them. In the first table I have only textbuttons in each row, while in the second one I have two rows with 3 textbuttons, which the rest are only one text button. this is the code:

        settingNames.bottom().left();
settingNames.add(new TextButton("Resolution:", style));
settingNames.row();
settingNames.add(new TextButton("VSync:", style));
settingNames.row();
settingNames.add(new TextButton("FullScreen:", style));
settingNames.row();
settingNames.add(new TextButton("Borderless:", style));
settingNames.row();
settingNames.add(new TextButton("Force FPS:", style));
settingNames.row();
settingNames.add(new TextButton("Target FPS:", style));
settingNames.setBounds(0, 0, Gdx.graphics.getWidth(),
Gdx.graphics.getHeight());
settingNames.debug();

resPrevious = new TextButton("<", style);
resText = new DynamicLabel(resHandler.getResolution(), labelStyleSkin);
resNext = new TextButton(">", style);
vsyncToggle = new TextButton("Off", style);
fullscreenToggle = new TextButton("Off", style);
borderlessToggle = new TextButton("Off", style);
forceFPSToggle = new TextButton("Off", style);
targetFPSPrevious = new TextButton("<", style);
targetFPSText = new DynamicLabel("60", labelStyleSkin);
targetFPSNext = new TextButton(">", style);
fullscreenToggle
.setColor(fullscreenToggle.getColor().r,
fullscreenToggle.getColor().g,
fullscreenToggle.getColor().b, 0); ---> Used this line to check how the textbutton looks.
changeOptions.center().bottom();
changeOptions.add(resPrevious);
changeOptions.add(resText);
changeOptions.add(resNext);
changeOptions.row();
changeOptions.add(vsyncToggle).fill(true, false);
changeOptions.row();
changeOptions.add(fullscreenToggle);
changeOptions.row();
changeOptions.add(borderlessToggle).fill(true, false);
changeOptions.row();
changeOptions.add(forceFPSToggle).fill(true, false);
changeOptions.row();
changeOptions.add(targetFPSPrevious);
changeOptions.add(targetFPSText).center();
changeOptions.add(targetFPSNext);
changeOptions.setBounds(0, 0, Gdx.graphics.getWidth(),
Gdx.graphics.getHeight());
changeOptions.debug();


I added all the tables to a stage and display them, but can't figure what's wrong, I could really use help here...

## 1 Answer

On the second table, you have two rows with three columns. If you want to center your others rows with these one, you have to set the horizontal size of the cell to three columns using the colspan method.

The "center" method will only center the widget inside it's own cell.

For example, your code should be :

changeOptions.center().bottom();
changeOptions.add(resPrevious);
changeOptions.add(resText);
changeOptions.add(resNext);
changeOptions.row();
changeOptions.add(vsyncToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(fullscreenToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(borderlessToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(targetFPSPrevious);
changeOptions.add(targetFPSText);
changeOptions.add(targetFPSNext);


Currently this what you are doing :

# Cell 1 # Cell 2 # Cell 3 #
# Cell 1 #
# Cell 1 #
# Cell 1 #
# Cell 1 # Cell 2 # Cell 3 #


With the above code, you should obtain :

# Cell 1 # Cell 2 # Cell 3 #
#          Cell 1          #
#          Cell 1          #
#          Cell 1          #
# Cell 1 # Cell 2 # Cell 3 #


And that's why on the first table the problem doesn't occure cause you only have one cell per rows.

• Alright, I will try it but right now I am facing a different problem, I'll approve this if I see it works, after I fix the other problem. – Aon GoltzCrank Jun 26 '14 at 8:54
• Alright I checked it and it works, thanks for the detailed explanation – Aon GoltzCrank Jun 26 '14 at 10:23