Adding a padding to a JavaFX button with an image

Question

Why can't add a padding left to the image inside the #todo button ?

enter image description here

.button {           
    -fx-background-size: 18 18;
    -fx-background-repeat: no-repeat;       
    -fx-background-position:left;   
    -fx-padding:20;
    /* same as -fx-label-padding:20; */
}

#todo {
    -fx-background-image: url("../images/Knob Add.png");
}

As I've observed CSS ref, it is API... If you have suggestions, you can file an RFE in jfx-jira. — Alexander Kirov, May 31 '13 at 11:11
@AlexanderKirov well, first time with jira, https://javafx-jira.kenai.com/browse/RT-30842 , wonder if I'm doing it right. — Salah Eddine Taouririt, May 31 '13 at 11:29

score 3 · Accepted Answer · edited May 23 '17 at 12:01

Don't use backgrounds to add images to your button, instead set a graphic on the button.

#todo .button {           
    -fx-padding: 20px;
    -fx-graphic: url("http://icons.iconarchive.com/icons/martz90/circle-addon1/16/text-plus-icon.png"); 
     /* Icon License: CC Attribution-Noncommercial-No Derivate 3.0 http://www.iconarchive.com/show/circle-addon1-icons-by-martz90/text-plus-icon.html*/
}

paddedtodo

Background information on Backgrounds and Margins

Backgrounds cover the entire background of a region, including the padded area, so you can't position a background using padding. Backgrounds are also a lot trickier than style with css and configure than graphics (as you found out...). You could get some approximation of what you want by setting -fx-background-position property and also adjusting your padding to allow for the background area of your background image so that your button text content doesn't overwrite the background. But it is fiddly and not worth it when it can be done in a much more straightforward way using a graphic.

I recall some conversation among developers about adding a margin property. If such a property were added, the background would not spill into the margin but be encapsulated by it. Such a property is not in Java 7 though,

Related Question

JavaFX - create custom button with image

Adding a padding to a JavaFX button with an image

1 Answers1