Button with image (styling with FXML/CSS)

Question

I have problem and don't have any idea how to solve it. I have button and I need to add image next to text on right. I did it but after resizing this button, image is always next to text. There is any solution to get text toleft and image to right side of button? (like on screenshot from scenebuilder)

FXML code:

<Button fx:id="btn1" alignment="BASELINE_LEFT" contentDisplay="RIGHT" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="50.0" text="Text">
           <graphic>
              <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true">
              <image>       
                <Image url="/images/User/user.png" preserveRatio="false" smooth="false" />          
              </image>
              </ImageView>
           </graphic>
</Button>

I can use Graphic text gap, but this is constant. Can i allign image to right side by code? — Thulion, Jan 18 '16 at 10:47
Did you have a look at the `contentDisplay` property? It can set where in relation to the text the graphic should be located (left, right, top, bottom) — Itai, Jan 18 '16 at 11:15
Ah, sorry, now I understand better what you mean, and see you already use it! — Itai, Jan 18 '16 at 11:17
Does the button width change dynamically, or is it set? If it's set you can just play around with the Graphic Text Gap until it looks fine. If it changes as the program runs I think you have no choice but to add some code, binding the gap to a value based on the actual width of the button. — Itai, Jan 18 '16 at 11:29

score 4 · Accepted Answer · answered Jan 18 '16 at 23:27

Background

In general, I'd advise, just using the ContentDisplay on buttons and having the button manage the layout of items inside the button on your behalf. But that approach will not work for your particular use-case.

Sample Solution

Put both the text and the image in the graphic inside your own layout manager (for example an HBox). This way you have the flexibility to apply a custom layout to the button, allowing you to situate the text and image exactly as you wish.

In the sample solution I add a Pane between the text and the graphic with a hgrow constraint of always, so that the pane will act as an expandable invisible spacer between the the text and the image, pushing them as far apart from each other horizontally as is possible (within the constraints of the overall button size).

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="150.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button contentDisplay="RIGHT" mnemonicParsing="false" prefHeight="98.0" prefWidth="259.0" style="-fx-base: thistle;">
         <graphic>
            <HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mouseTransparent="true">
               <children>
                  <Label text="Nightshade">
                     <font>
                        <Font name="Papyrus" size="24.0" />
                     </font></Label>
                  <Pane HBox.hgrow="ALWAYS" />
                  <ImageView>
                     <image>
                        <Image url="@Potion-icon.png" />
                     </image>
                  </ImageView>
               </children>
            </HBox>
         </graphic>
      </Button>
   </children>
</StackPane>

Yeah - that is what I was looking for :). Thank you very much jewelsea! Now everything adjust automatically. — Thulion, Jan 19 '16 at 11:01

Button with image (styling with FXML/CSS)

1 Answers1

Linked