Centering widgets within a layout

[caoakleyii]

I'm trying to figure out how to properly center child widgets within a layout? Currently I have three buttons, within a layout, the flow is set to x. I would like to 'middle center' those buttons within the full size of the layout (which is the window size).

I don't see any examples of this and it seems align only changes text and icons not widgets.

Here's a sample of the code:

local character_select = Layout {
  id = 'characterSelect',
  style = 'character_select_screen',
   {
    type = 'button',
    id = 'btnWarrior',
    text = 'Warrior',
    width = 100,
    height = 32,
    style = 'chararcter_button'
  },
  {
   type = 'button',
   id = 'btnMage',
   text = 'Mage',
   width = 100,
   height = 32,
   style = 'chararcter_button'
 },
 {
    type = 'button',
    id = 'btnRanger',
    text = 'Ranger',
    width = 100,
    height = 32,
    style = 'chararcter_button'
  }
};

local character_select_style = {
  character_select_screen = {
    flow = 'x',    
  },
  chararcter_button = {
    margin = 5,
    align = 'center middle'
  }
}

character_select:setStyle(character_select_style);

[airstruck]

You can add an outer level to your layout with dummy widgets on each side of it, something like this:

{ flow = 'x', {}, { flow = y, -[[ your current layout ]] }, {} }

The middle one should expand to fit your buttons and those two dummy widgets (the empty tables) should get equal parts of the remaining space, keeping the middle one centered.

+--+-------------+--+
|  |             |  |
|  | [ buttons ] |  |
|  |             |  |
+--+-------------+--+

[caoakleyii]

Than you, this helped. However, the right most button is clipping.

Here's an image of what it looks like

Just for reference here's the updated layout code.

local character_select = Layout   {
    flow = 'x',
    {},
    {
      flow = 'x',
      id = 'characterSelect',
      style = 'character_select_screen',
      {
        type = 'button',
        id = 'btnWarrior',
        text = 'Warrior',
        width = 100,
        height = 32,
        style = 'chararcter_button'
      },
      {
       type = 'button',
       id = 'btnMage',
       text = 'Mage',
       width = 100,
       height = 32,
       style = 'chararcter_button'
     },
     {
        type = 'button',
        id = 'btnRanger',
        text = 'Ranger',
        width = 100,
        height = 32,
        style = 'chararcter_button'
      }
    },
    {}
  };

character_select.id = 'characterSelect';

local character_select_style = {
  character_select_screen = {

  },
  chararcter_button = {
    align = 'center middle'
  }
}

[airstruck]

Oops, things don't actually expand to fit their contents. I was going to add that at one point, but decided against it. Things do generally expand to take up empty space in their containing widgets, so if you need to specify widths you're better off doing it on outer widgets and let the inner widgets fill up the space.

Try removing the width from the buttons and giving the widget they're contained in a width of 300 or so.

[caoakleyii]

Thank you. Removing the width from the buttons worked alone, but will also keep the rest of that in mind.