# Aligning controls and their labels to grid?

I have a Manipulate with 6 sliders controlling 6 different variables. I have labelled them all. The problem is that the labels have different lengths, so it looks a bit messy:

I'd much rather have the sliders aligned with each other perfectly so that they don't start and end in different places, to make them look more orderly. How would it be possible to do this?

This is how the control panel is presently built:

{{x, 1, "Time"}, 1, 200*3.154*^7, Animator,
AnimationRate -> speed*86400, AnimationRunning -> False},
Row[{Control[{{speed, 1, "Speed"}, 1, 30}], Spacer[20],
Dynamic[speed]}],
Row[{Control[{{\[Theta], 10, "Zoom"}, 30, 1}], Spacer[20],
Dynamic[\[Theta]], " degrees"}],
Row[{Control[{{scale, 0, "Scaling"}, 0, 5}], Spacer[20],
Dynamic[10^scale], " \[Times]"}],
Row[{Control[{{Opac, 0.05, "Opacity"}, 0, 0.5}], Spacer[20],
Dynamic[Opac]}],
Row[{Control[{{recurRate, 1, "Recurrence rate"}, 0.1, 1}], Spacer[20],
Dynamic[recurRate]}]


UPDATE

On @Kuba's recommendation, I have put the whole thing in a Grid. Now however, it is displaying the variable names alongside the sliders. How can I hide the variable names from displaying next to the sliders? This is the code I'm currently using:

Grid[{
{"Time",
Control[{{x, 1}, 1, 200*3.154*^7, Animator,
AnimationRate -> speed*86400, AnimationRunning -> False}],
SpanFromLeft},
{"Speed", Control[{{speed, 1}, 1, 30}], Spacer[20], Dynamic[speed],
Dynamic@If[speed == 1, " day per second",
" days per second"]},
{"Zoom", Control[{{\[Theta], 10}, 30, 1}],
Spacer[20], Dynamic[\[Theta]],
Dynamic@If[\[Theta] == 1, " degree", " degrees"]},
{"Scaling", Control[{{scale, 0}, 0, 5}], Spacer[20],
Dynamic[10^scale], " \[Times]"}},
Alignment -> Left]


-
Use Grid[{ {label, control, value}, ... instead of multiple rows. –  Kuba Apr 16 '14 at 23:14
Is there no way to keep the present structure without having to rebuild it all? Because ideally I'd like to keep the label named within the slider's controls, like so: {{speed, 1, **"Speed"**}, 1, 30} –  Aron Apr 16 '14 at 23:17
I don't see why you think it can;t be done with Grid. Anyway, you can force this with your Rows by pn = Pane[#, 170] &; and then pn@"Speed" etc. –  Kuba Apr 16 '14 at 23:21
Ok, I have used Grid to align all the controls with each other. Now I am having the variable name display alongside the label though.. as in in the first column are all the labels I put in by hand, but in the second column along with the slider is the name of the variable. How can I hide the variable name? (I have no idea how to upload images in comments so can't show you a screenshot) –  Aron Apr 16 '14 at 23:33
Add an empty string in position {1,3) of your slider declarations. For example, Control[{{speed, 1}, 1, 30}] becomes Control[{{speed, 1, ""}, 1, 30}]. Then no variable name will show up on the left of the slider. –  m_goldberg Apr 17 '14 at 2:14

I have a way of doing this by wrapping the label with a Panel. This has two effects: organizes space making a view more accurate and prevents jerking. Since you gave no code that can be played with, only the controls, I make here a simple example with two controls, just to demonstrate the way. Here you are:

    Manipulate[
Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1}],
{{\[Theta], 1,
Dynamic@Panel[
Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}],
ImageSize -> {90, 40}]}, 0, 10},
{{scale, 1,
Dynamic@Panel[
Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}],
ImageSize -> {90, 40}]}, 0.1, 10} ]


This is how it should look like: In this approach it is not necessary to wrap the actual control with the Control[ ] statement. In general this statement is useful, if one wants to organize the controls spacially, using Grid or Row and Column. Further, you wanted to put some information in front of, and some - behind the control. This may be done as follows:

    Manipulate[
Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1}],
Row[{Control[{{\[Theta], 1,
Dynamic@Panel[
Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}],
ImageSize -> {90, 40}]}, 0, 10}], Spacer[10],
Panel[Row[{Style["something=", Blue, 14],
Dynamic@Style[\[Theta], Blue, 14]}], ImageSize -> {120, 40}]}],
{{scale, 1,
Dynamic@Panel[
Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}],
ImageSize -> {90, 40}]}, 0.1, 10} ]


yielding: You see that here the Control[ ] statement is useful. I did it for one of the controls only, but you can do the same with all of them. Playing with the ImageSize option for the Panel you can adjust their sizes, such that all your control names fit into them.

Control statement is especially useful, if you want to arrange the controls, say, in a line:

    Manipulate[
Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1},
ImageSize -> 600],
Row[{
Control[{{\[Theta], 1,
Dynamic@Panel[
Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}],
ImageSize -> {90, 40}]}, 0, 10}],
Spacer[10],
Control[{{scale, 1,
Dynamic@Panel[
Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}],
ImageSize -> {90, 40}]}, 0.1, 10}]
}]]


One further possibility would be to wrap the dynamic variable by NumberForm which will make the view even more ordered. Have fun.

-