4 Replies Latest reply: Dec 4, 2012 7:28 PM by jsmith RSS

    Text under the image of a button

    biochemistry43
      I'm doing some buttons with image and wish you text. However I can not make the text is placed below the image.

      Is there any way to do this?

      I'm building button with Scene Builder.

      The CSS I hold to insert the image in the button is as follows:
      #chatButton {
          -fx-text-fill: white;
          -fx-graphic: url("../signa/img/chat.png");
          -fx-background-color: transparent;
      }
      Edited by: biochemistry43 on 4/12/2012 08:06 AM
        • 1. Re: Text under the image of a button
          903683
          Try this:
          Button b = new Button("Text");
          b.setGraphic(yourgraphichere);
          b.setContentDisplay(ContentDisplay.TOP);
          I don't know if it works if you set the graphic via CSS.

          Cheers,
          Daniel
          • 2. Re: Text under the image of a button
            biochemistry43
            but I'm building button in FXML through Scene Builder
            • 3. Re: Text under the image of a button
              903683
              Then you can select the value of the Content Display property by selecting the button and choosing the desired value in the Properties section in the right sidebar. I can't find anything to set the graphic of the button, but you can edit the FXML directly and set graphic there:
              <Button text="Click me" graphic="path to your graphic" />
              It is possible, that it won't work, try using this if that's the case:
              <Button text="Click me">
                  <graphic>
                      <fx:reference source="path to the graphic"/>
                  </graphic>
              </Button>
              • 4. Re: Text under the image of a button
                jsmith
                <?xml version="1.0" encoding="UTF-8"?>
                
                <?import java.lang.*?>
                <?import java.util.*?>
                <?import javafx.scene.control.*?>
                <?import javafx.scene.image.*?>
                <?import javafx.scene.layout.*?>
                <?import javafx.scene.paint.*?>
                
                <AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
                  <children>
                    <Button contentDisplay="TOP" layoutX="222.0" layoutY="165.0" mnemonicParsing="false" text="Sweeeet !!!">
                      <graphic>
                        <ImageView>
                          <image>
                            <Image url="http://icons.iconarchive.com/icons/fasticon/valentine/128/heart-love-icon.png" />
                          </image>
                        </ImageView>
                      </graphic>
                    </Button>   
                  </children>
                </AnchorPane>