Multiple buttons in a Manipulate: how do I get a good layout?

Question

Consider the following code

Manipulate[a,
 Dynamic@Grid[{
    {"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
    {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}
    }, Alignment -> {{Right, Left}, Automatic}],
 Delimiter,
 Button["Button 1"],
 Button["Button 2"],
 ControlPlacement -> Left]

which gives

Now, if we were to include an If statement for one of the buttons, we would need to use Dynamic. For example, we could use

Manipulate[a,
 Dynamic@Grid[{
    {"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
    {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}
    }, Alignment -> {{Right, Left}, Automatic}],
 Delimiter,
 Button["Button 1"],
 Dynamic[If[a == 0, Button["Button 2"], Button["Button 3"]]],
 ControlPlacement -> Left]

which yields

As one can see, the button alignment changes when I do this. I want to fix this, to keep the same appearance as in the first example. One attempt at trying to solve this was to consider a Dynamic@Grid. That is,

Manipulate[a,
 Dynamic@Grid[{
    {"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
    {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}
    }, Alignment -> {{Right, Left}, Automatic}],
 Delimiter,
 Dynamic@Grid[{
    {Button["Button 1"]},
    If[a == 0, {Button["Button 2"]}, {Button["Button 3"]}]
    }],
 ControlPlacement -> Left]

This, however, makes it a bit worse:

I could change the ItemSize within the Grid to get something similar to what I want, but I would have to do it manually. For instance,

Manipulate[a,
 Dynamic@Grid[{
    {"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
    {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}
    }, Alignment -> {{Right, Left}, Automatic}],
 Delimiter,
 Dynamic@Grid[{
    {Button["Button 1"]},
    If[a == 0, {Button["Button 2"]}, {Button["Button 3"]}]
    }, ItemSize -> 30],
 ControlPlacement -> Left]

leads to

Still, the alignment with the slider is not perfect, and I'd have to manually adjust it. I wonder if it's possible to do this in a more "automatic" way, without relying on manually fixing the ItemSize. I could include all controls in a Grid, but the problem with that is that the Delimiter doesn't seem to format if I use a Grid, and I want to keep it in my Manipulate. Any ideas how to solve this?

Furthermore, how would I deal with the case

Manipulate[a,
 Dynamic@Grid[{
    {"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
    {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}
    }, Alignment -> {{Right, Left}, Automatic}],
 Delimiter,
 Dynamic@Column[{
    {Button["Button 1"], Button["Button 2"]} // Row,
    {Button["Button 3"], Button["Button 4"]} // Row
    }, ItemSize -> 15],
 ControlPlacement -> Left]

that is,

Any suggestions are appreciated.

Answer 1

How about putting everything in the grid? Like so:

Manipulate[a,
  Dynamic @
    Grid[
      {{"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
       {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]},
       {Button["Button 1"], SpanFromLeft},
       {If[a == 0, Button["Button 2"], Button["Button 3"]], SpanFromLeft}},
      Dividers -> {False, {3 -> True}},
      Alignment -> {{Right, Left}, Automatic}],
  ControlPlacement -> Left]

The result looks like this:

Slider at zero

Slider moved off zero.

Update 1

For your array of four buttons, will this work?

Manipulate[a,
  Grid[
    {{"Slider", Control[{{a, 0, ""}, 0, 1, .1}]},
     {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}},
    Alignment -> {{Right, Left}, Automatic}],
  Delimiter,
  Grid[
    {{Button["Button 1"], Button["Button 2"]},
     {Button["Button 3"], Button["Button 4"]}},
    ItemSize -> {Scaled[.2], Automatic}],
 ControlPlacement -> Left]

Update 2

You apparently don't like my first attempt at solving your four button array problem because buttons are elastic and change width as adjustments are made to notebook window, while manipulators are rigid and ignore such changes. The only solution I can think of is to make everything rigid. This means that you will have to specify the control sizes in your code and your users will be stuck with what you specify.

Manipulate[a,
  Grid[
    {{Item["Slider", ItemSize -> 100/CurrentValue["FontMWidth"]], 
      Control[{{a, 0, ""}, 0, 1, .1, ImageSize -> 300}]},
     {"Checkbox", Control[{{b, 1, ""}, {1, 0}}]}},
    Alignment -> {{Right, Left}, Automatic}],
  Delimiter,
  Grid[
    {{Button["Button 1", ImageSize -> 180], Button["Button 2", ImageSize -> 180]},
    {Button["Button 3"], Button["Button 4"]}}],
  ControlPlacement -> Left]

Notes

• My target width for the controls array is 400 points. The buttons are set to 190 points to allow for the spacing between them. The manipulator is set to 290 points for a similar reason.

• The target for the labels is 100 points. However, ItemSize works in printer's ems (as redefined by WRI). That is reason for dividing by CurrentValue["FontMWidth"].

• Width specifications need only be set for the top row of a grid. Succeeding rows will follow what was set for the top.