6
$\begingroup$

I just need to center a button in the MWE code below. Currently, all I try doesn't work. I would like to horizontally center the button relative to the sliders over it, for aesthetical reasons only.

Manipulate[
    ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10},
        PlotRange -> {{-1.5, 2.5}, {0, 5}},
        AspectRatio -> 1,
        Frame -> True,
        Axes -> True,
        AxesOrigin -> {0, 1},
        GridLines -> Automatic,
        ImageSize -> 600
    ],
{{x, 1, "x"}, 0, 5, 0.01, ImageSize -> Large},
{{y, 1, "y"}, 0, 5, 0.01, ImageSize -> Large},
{{z, 1, "z"}, 0, 5, 0.01, ImageSize -> Large},
{{u, 0, "u"}, -2, 2, 0.01, ImageSize -> Large},
Delimiter,
Button["Button",{x = 1, y = 1, z = 1, u = 0},Appearance -> "Palette",ImageSize -> {256, 28}
],
ControlPlacement -> Bottom]

It's probably trivial, but can't find it ! :-(

$\endgroup$

2 Answers 2

5
$\begingroup$

Place the Button in a Row. Using the dimensions that you have given of 600 for the plot and 256 for the Button you would want the spacing to be the difference divided by two. You can adjust the spacing to your liking if it doesn't match your expectations.

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> 600],

 {{x, 1, "x"}, 0, 5, 0.01, ImageSize -> Large},
 {{y, 1, "y"}, 0, 5, 0.01, ImageSize -> Large},
 {{z, 1, "z"}, 0, 5, 0.01, ImageSize -> Large},
 {{u, 0, "u"}, -2, 2, 0.01, ImageSize -> Large},
 Delimiter,
 Row[{
   Spacer[(600 - 256)/2],
   Button["Button", {x = 1, y = 1, z = 1, u = 0}, 
    Appearance -> "Palette", ImageSize -> {256, 28}]
   }],
 ControlPlacement -> Bottom]

Mathematica graphics

Update - Center all in Manipulate Window

In order to center the controls and the Button in the whole Manipulate window, place all of the controls in a centered column inside the Row. Set the Alignment of the column to center.

When placed inside a Row, Grid or Column one has to explicitly wrap the control with Control (see below).

Also one would have to build their own delimiter.

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10},
  PlotRange -> {{-1.5, 2.5}, {0, 5}},
  AspectRatio -> 1, Frame -> True, Axes -> True, AxesOrigin -> {0, 1},
   GridLines -> Automatic, ImageSize -> 600],
 Row[{
   Spacer[(600 - 256)/2],
   Column[{
     Control[{{x, 1, "x"}, 0, 5, 0.01, ImageSize -> {265, 5}}], 
     Control[{{y, 1, "y"}, 0, 5, 0.01, ImageSize -> {256, 5}}], 
     Control[{{z, 1, "z"}, 0, 5, 0.01, ImageSize -> {256, 5}}], 
     Control[{{u, 0, "u"}, -2, 2, 0.01, ImageSize -> {256, 5}}], 
     Row[{Graphics[{Thick, Line[{{0, 0}, {1, 0}}]}, 
        ImageSize -> {256, 5}, AspectRatio -> 5/256]}],
     Button["Button", {x = 1, y = 1, z = 1, u = 0},
      Appearance -> "Palette", ImageSize -> {256, 28}]
     }, Alignment -> Center]
   }],
 ControlPlacement -> Bottom]

Mathematica graphics

$\endgroup$
6
  • $\begingroup$ Wow ! Both solutions are nice. Thanks guys. I'm selecting this answer as the solution since it is simpler and fits very well my project. $\endgroup$
    – Cham
    Mar 2, 2016 at 18:03
  • $\begingroup$ Is there a way to place the button in the middle of the whole manipulate window ? $\endgroup$
    – Cham
    Mar 2, 2016 at 18:11
  • $\begingroup$ Depending upon how much work you want to put into it you have complete control over the 1Slider, Button, InputField, etc.. I think of it as being three levels. First, using the default position from Manipulate. Second, place inside a Row, Column` or Grid and wrap the control with Control. Third, put it where ever you like (even inside the plot) and use explicit control types with Dynamic inside the control. The latter is the most powerful but takes the most work. I have updated the answer to show you level two, how to center it in the plot. $\endgroup$ Mar 3, 2016 at 23:34
  • $\begingroup$ Your last code doesn't work on my system. It gives a frozen Manipulate window, and no warning/error messages ! I can't move the sliders. $\endgroup$
    – Cham
    Mar 4, 2016 at 14:14
  • $\begingroup$ @cham Sorry, I was too quick on the draw. The best I could do without going to level 3 (Dynamic) was to put the controls in a Row with a Spacer and a centered Column. $\endgroup$ Mar 4, 2016 at 21:00
7
$\begingroup$

Another way is to use Grid for complex layouts. One drawback is that Delimiter does not work as in the original Manipulate, the advantage is that you can use all styling options available to Grid, plus you don´t have to fiddle with discrete ImageSize values etc.:

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> 600],
 Grid[{{Control@{{x, 1, "x"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{y, 1, "y"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{z, 1, "z"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{u, 0, "u"}, -2, 2, 0.01, 
      ImageSize -> Large}}, {Button[
     "Button", {x = 1, y = 1, z = 1, u = 0}, 
Appearance -> "Palette"]}}], ControlPlacement -> Bottom]

Mathematica graphics

If you want the whole control block centered, this is easily added by applying an additional Pane:

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> {1000, 300}], 
 Pane[Grid[{{Control@{{x, 1, "x"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{y, 1, "y"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{z, 1, "z"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{u, 0, "u"}, -2, 2, 0.01, 
       ImageSize -> Large}}, {Button[
      "Button", {x = 1, y = 1, z = 1, u = 0}, Appearance -> "Palette",
       ImageSize -> Medium]}}], ImageSize -> 1000, 
  Alignment -> {Center, Center}], ControlPlacement -> Bottom]

Mathematica graphics

$\endgroup$
5
  • $\begingroup$ Nice ! However, I prefer the second solution, which is simpler. Thanks a lot ! $\endgroup$
    – Cham
    Mar 2, 2016 at 18:04
  • $\begingroup$ Glad you like it! It sure is more work to begin with (although it tends to pay off for more complex layouts). $\endgroup$
    – Yves Klett
    Mar 2, 2016 at 18:34
  • $\begingroup$ Is there a way to center the button relative to the Manipulate window width (which is not defined in the code) ? $\endgroup$
    – Cham
    Mar 2, 2016 at 18:35
  • $\begingroup$ @Cham comin up, standby... there you are. $\endgroup$
    – Yves Klett
    Mar 2, 2016 at 18:37
  • $\begingroup$ Thanks. Your answer is pretty complete. $\endgroup$
    – Cham
    Mar 2, 2016 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.