5
$\begingroup$

I have a button containing a single character, generated with, for example

Button["X", Null] 

but that is by default much wider than it should be:

enter image description here

I want the button to be much narrower, like the key of a keyboard; something like

enter image description here

but when I attempt to achieve that with what seems like the obvious approach using

Button["X", Null, ImageSize -> {25, 25}]

I get

enter image description here

which neither has the specified size, nor the shows the specified content correctly.

What am I missing? Options like FrameMargins -> 0, ContentPadding -> False don't do much. How do I get a button sized the way I'm looking for, closely bounding a single character, like a keyboard key?


MacBook Pro Retina (Mid 2014), OS X (10.10.2), Mathematica 10.0.2.0.

$\endgroup$
3
  • $\begingroup$ In my machine it shows up OK - Mma v9 Win32 $\endgroup$ – Dr. belisarius Mar 15 '15 at 2:14
  • $\begingroup$ also on windows 7, 10.02. It shows OK. But try ImageSize -> Full and see if this makes any difference. $\endgroup$ – Nasser Mar 15 '15 at 3:18
  • $\begingroup$ @Nasser: ImageSize -> Full looks the same as the first example. It's (another) bug, I guess. $\endgroup$ – orome Mar 15 '15 at 12:34
3
$\begingroup$

If you're happy with a palette appearance for the Button, you can try this:

niceX = Rasterize[
   TraditionalForm["X"],
   "Image",
   ImageSize -> 10,
   RasterSize -> 75
   ];

Button[
 Style[niceX],
 FrameMargins -> 0,
 Appearance -> "Palette"
 ]

Blockquote

$\endgroup$
7
  • $\begingroup$ So Button doesn't work with strings? $\endgroup$ – orome Mar 15 '15 at 12:30
  • $\begingroup$ Nice solution. (Too bad it seems necessary.) $\endgroup$ – orome Mar 15 '15 at 12:40
  • $\begingroup$ Wait, this works also (again if "Palette" is acceptable): Button["X", Null, ImageSize -> {20, 20}, FrameMargins -> 0, Appearance -> "Palette"] $\endgroup$ – orome Mar 15 '15 at 12:46
  • $\begingroup$ @raxacoricofallapatorius I think Appearance -> "Palette" is sufficient, even for strings. But buttons are system dependent. (I'm on a Mac.) I can't the default not to have the left and right abutting ends (which may be what they actually are). -- oh, I see you figured out the first part. $\endgroup$ – Michael E2 Mar 15 '15 at 12:47
  • 1
    $\begingroup$ I added the rasterized x so that the background would be white instead of gray, assuming this would be more preferable to you. But you know what they say about assuming. ;) $\endgroup$ – TransferOrbit Mar 15 '15 at 14:10
3
$\begingroup$

These options seem to be undocumented and haven't appeared on the site as far as I can see. So maybe this is a good place to show them, as they could be used as a workaround for the OP and may be useful for others:

Button["X", Null, FrameMargins -> 1, 
 Appearance -> {
   "Default" -> FrontEnd`FileName[{"Ribbons", "Common"}, "GrayButton-Default.9.png"], 
   "Hover" -> FrontEnd`FileName[{"Ribbons", "Common"}, "GrayButton-Hover.9.png"], 
   "Pressed" -> FrontEnd`FileName[{"Ribbons", "Common"}, "GrayButton-Pressed.9.png"]}]

Mathematica graphics

In general, we seem to need a 7 x 28 image. The middle column (of the image data) seems to be used as a tile. I probably don't have the edges quite right, but it produces a button-like button:

buttonImg[col_] := 
 Image[Graphics[{{col, EdgeForm[], 
     Rectangle[{1, 1}, {6, 27}, RoundingRadius -> 2]},
    {Black, Opacity[0.], Rectangle[{0, 27}, {3, 28}], 
     Rectangle[{4, 27}, {7, 28}]},
    {Rectangle[{0, 2}, {2, 26}], 
     Rectangle[{5, 2}, {7, 26}], {Rectangle[{2, 25}, {3, 27}], 
      Rectangle[{3, 26}, {4, 28}], 
      Rectangle[{4, 25}, {5, 27}]}, {Rectangle[{2, 1}, {3, 3}], 
      Rectangle[{3, 0}, {4, 2}], Rectangle[{4, 1}, {5, 3}]}}},
   PlotRangePadding -> None, PlotRange -> {{0, 7}, {0, 28}}], 
  ImageSize -> {7, 28}]

OP's example:

Button["X", Null, FrameMargins -> 1,
 Appearance -> {
   "Default" -> buttonImg[GrayLevel[0.98]], 
   "Hover" -> buttonImg[GrayLevel[0.9]], 
   "Pressed" -> buttonImg[RGBColor[0.5, 0.7, 1.]]}]

Mathematica graphics Mathematica graphics Mathematica graphics

The image is resized, perhaps by tiling the middle of the image:

Button[X^2/(X + 1), Null, FrameMargins -> 1,
 Appearance -> {
   "Default" -> buttonImg[GrayLevel[0.98]], 
   "Hover" -> buttonImg[GrayLevel[0.9]], 
   "Pressed" -> buttonImg[RGBColor[0.5, 0.7, 1.]]}]

Mathematica graphics

Of course, any image may be used:

Button["X", Null,
 Appearance -> {
   "Default" -> Image@Graphics[{Circle[]}], 
   "Hover" -> Image@Graphics[{EdgeForm[Black], LightGray, Disk[]}], 
   "Pressed" -> Image@Graphics[{EdgeForm[Black], Red, Disk[]}]}]

In this case, it seems to resize the image by scaling:

Button[(1 + y)^40 // Expand, Null,
 Appearance -> {
   "Default" -> Image@Graphics[{Circle[]}], 
   "Hover" -> Image@Graphics[{EdgeForm[Black], LightGray, Disk[]}], 
   "Pressed" -> Image@Graphics[{EdgeForm[Black], Red, Disk[]}]}]

$\endgroup$
3
  • $\begingroup$ Great find. I worry that I won't be able to use undocumented features though. I'm trying to (and near giving up on) build a Wolfram Demonstration that needs quite a bit of text input, but InputField is prohibited in Demonstrations, and I'm experimenting with using a keyboard, which is where the need for buttons comes from. $\endgroup$ – orome Mar 15 '15 at 15:12
  • $\begingroup$ @raxacoricofallapatorius Thanks. I think that the "Palette" style would be quite suitable for a keyboard. Or ButtonBar, which shrink-wraps the buttons. $\endgroup$ – Michael E2 Mar 15 '15 at 15:15
  • $\begingroup$ Agreed. I'm seeing what I can get going. I'm stuck on how to make use of the string it creates inside Manipulate though (see my last comment here). $\endgroup$ – orome Mar 15 '15 at 15:18
2
$\begingroup$

ContentPadding:

ContentPadding
is an option for objects that can be displayed with frames that specifies whether the vertical margins should shrink wrap tightly around the contents.

  • A setting of ContentPadding -> False shrinks the content area tightly around the contents instead of rounding to the next full line height.
Button["X", Null, FrameMargins -> 0, ContentPadding -> False]

enter image description here

compare to

Button["X", Null, FrameMargins -> 0]

enter image description here

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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