# Aligning Checkboxes in Manipulate

Consider the following code

Manipulate[c,
Dynamic@Grid[{
{"Checkbox 1",
Row[{Control[{{a, 0, ""}, {1, 0}}],
If[a == 1,
Control[{{c, {0}, ""}, {1 -> "Edit"},
ControlType -> TogglerBar}], Unevaluated[Sequence[]]]}, Alignment -> Left]},
{"Checkbox 2", Control[{{b, 0, ""}, {1, 0}}]}
}, Alignment -> {Left, Right}], ControlPlacement -> Left]


When I check the first Checkbox, I get

As one can see, the alignment between the two checkboxes is now off. Any way to fix this? I tried aligning the Row and setting Appearance -> None within the Edit control, but nothing seems to work.

My goal is to get

Any suggestions/alternative are appreciated.

Edit: Using kglr's solution below, and setting Appearance -> None in the Edit control, I still have two issues. One is that even though the additional vertical spacing I get when Checkbox 1 is selected can be neutralised by the extra Appearance condition, I'd still like to have no horizontal spacing, as seen in the following

Secondly, my code actually has lots of checkboxes and sliders vertically displayed, so this solution would yield a much bigger code and this horizontal offset would look a bit bad overall. These are minor details, but if anyone has any ideas how to solve these issues, please share!

• add the option ItemSize -> {{7, 7, Automatic}, {3, 3, Automatic}} to Grid[] – andre314 Dec 31 '19 at 18:46
• use {"Checkbox 2", Row[{Control[{{b, 0, ""}, {1, 0}}], If[a == 1, "", Unevaluated[Sequence[]]]}, Alignment -> Left]} in the second row of Grid? – kglr Dec 31 '19 at 20:46

Update: Remove the automatic content padding from Setters in TogglerBar to eliminate changes in item sizes:

noPadding = Style[#, DefaultOptions -> {Setter -> { ContentPadding -> 0}}] &;

Manipulate[c,
Dynamic @ Grid[{
{"Checkbox 1", Control[{{a, 0, ""}, {1, 0}}],
If[a == 1,
noPadding @ Control[{{c, {0}, ""}, {1 -> "Edit", 2 -> "blah"}, TogglerBar}],
Unevaluated[Sequence[]]]},
{"Checkbox 2", Control[{{b, 0, ""}, {1, 0}}]}},
Alignment -> {Left, Right, Left}],
ControlPlacement -> Left, Alignment -> Center]


Manipulate[c,
Dynamic @
Grid[{{"Checkbox 1", Row[{Control[{{a, 0, ""}, {1, 0}}],
If[a == 1,
Control[{{c, {0}, ""}, {1 -> "Edit"}, ControlType -> TogglerBar}], ##&[]]},
Alignment -> Left]},
{"Checkbox 2", Row[{Control[{{b, 0, ""}, {1, 0}}],
If[a == 1, "", ##&[]]}, Alignment -> Left]}},
Alignment -> {Left, Right}],
ControlPlacement -> Left]


• Thank you, this is a great solution. I still have, however, two issues: the first is that there is extra horizontal space when Checkbox 1 is selected (see edit section in my question). Second, my code actually has lots of checkboxes and sliders, meaning that I'd have to add that If bit to every single control, which would yield a much bigger code. Any way around this? In any case, thanks a lot, this is already pretty useful as it is! – sam wolfe Jan 1 at 15:00
• Could it be that the spacing is related to the natural list bracket spacing from Row? I don't know much about it, but maybe it could be compensated with something like a "negative" version of a Spacer that would drag Checkbox 1 to the left, but I'd like it to be automatic and resolution/OS independent. – sam wolfe Jan 1 at 15:08
• @sam, please see the update. – kglr Jan 1 at 18:33