This discussion is archived
4 Replies Latest reply: Dec 4, 2012 5:28 PM by jsmith RSS

Text under the image of a button

biochemistry43 Newbie
Currently Being Moderated
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 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    but I'm building button in FXML through Scene Builder
  • 3. Re: Text under the image of a button
    903683 Newbie
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    <?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>

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points