How can i show text in a Button in JavaFX?

Question

i'm trying to display some text on those 3 buttons on the top-left corner but somehow it's not possible...

Here's image so you can see where the buttons are:

What i've already tried:

Adding wraptext="true"
setting textOverrun="CLIP" But it doesn't work in both cases!

Here's the FXML snippet:

<HBox fx:id="buttons_group" alignment="CENTER_LEFT" prefHeight="22.0" spacing="7" style="-fx-padding: 0 0 0 8" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.5" AnchorPane.topAnchor="0.0">

                  <Button fx:id="closebtn" text="×" textFill="black" onMouseClicked="#onClickCloseBtn" style="-fx-background-radius: 50; -fx-min-height: 9; -fx-min-width: 9; -fx-max-height: 9; -fx-max-width: 9; -fx-background-color: #FF453A" />
                  <Button fx:id="minimizebtn" text="-" textFill="black" onMouseClicked="#onClickMinimizeBtn" style="-fx-background-radius: 50; -fx-min-height: 9; -fx-min-width: 9; -fx-max-height: 9; -fx-max-width: 9; -fx-background-color: #FFD60A" />
                  <Button fx:id="maximizebtn" text="□" textFill="black" onMouseClicked="#onClickMaximizeBtn" style="-fx-background-radius: 50; -fx-min-height: 9; -fx-min-width: 9; -fx-max-height: 9; -fx-max-width: 9; -fx-background-color: #32D74B" />
        </HBox

Thanks!

Make your font size smaller or buttons bigger so that the text will fit in the buttons. — jewelsea, Mar 22 '22 at 16:45
The font is already smaller than the button size. Then, what do you mean for hard coding the sizes? If i don't specify min and max values the minimum value i can use as pref height and width is 20 and i want my buttons to be 9. — Thomas Basile, Mar 22 '22 at 16:57
Off-topic, but I advise putting style in a CSS stylesheet rather than inline in the FXML. Also, for something like this, if you must specify a size, consider using em units for measurements rather than pixels, that way the interface elements can [scale in size if the base font size changes](https://stackoverflow.com/questions/23229149/javafx-automatic-resizing-and-button-padding). Understand also that, by default controls will have in-built padding to nicely space and display text and other graphic details within the surrounding interface object, so you need to take that into account. — jewelsea, Mar 22 '22 at 19:52
Yes, you're right but i just want those buttons and text inside of them to be static and not dynamic, just because it's a custom decoration of the window, anyway thank you for this advice :) — Thomas Basile, Mar 23 '22 at 12:10

score 3 · Accepted Answer · answered Mar 22 '22 at 17:11

Set negative padding to your buttons.

You might also want to decrease font size as the default is 12px, while your buttons are 9px in size.

Centering is not perfect with such small buttons though...

Here's an example done in SceneBuilder.

  <HBox alignment="CENTER_LEFT" prefHeight="22.0" spacing="7.0" style="-fx-background-color: #333;">
     <children>
        <Button maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="9.0" prefWidth="9.0" style="-fx-background-radius: 4.5; -fx-background-color: #FF453A; -fx-padding: -100;" text="x">
           <font>
              <Font size="10.0" />
           </font>
        </Button>
        <Button maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="9.0" prefWidth="9.0" style="-fx-background-radius: 4.5; -fx-background-color: #FFD60A; -fx-padding: -100;" text="-">
           <font>
              <Font size="10.0" />
           </font>
        </Button>
        <Button maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="9.0" prefWidth="9.0" style="-fx-background-radius: 4.5; -fx-background-color: #32D74B; -fx-padding: -100;" text="□">
           <font>
              <Font size="10.0" />
           </font>
        </Button>
     </children>
     <padding>
        <Insets bottom="7.0" left="7.0" right="7.0" top="7.0" />
     </padding>
  </HBox>

Result :

Thank you! Well-structured and clear answer. Do you also know how to set Cursor to default when mouse is over the button? I've already tried with the tag and didn't work. — Thomas Basile, Mar 22 '22 at 17:28
Ask different questions as different questions not as comments. — jewelsea, Mar 22 '22 at 19:44
It works fine but textAlignment="CENTER" doesn't work, the text is not centered — Thomas Basile, Mar 23 '22 at 13:58
You don't need to set anything, text is centered in buttons by default. However, if you want it to appear centered vertically, it must be caps (the whole line of text gets centered as opposed to text graphics), and your buttons are too small to have text being both readable and centered horizontally. And you might also want to set `snapToPixel` to false on your button. You could also fix it by tweaking individual padding values. IMO, it would be easier for you to use an image, either as button graphics, or as background to achieve your goal — julien.giband, Mar 24 '22 at 07:29

How can i show text in a Button in JavaFX?

1 Answers1