JavaFX: Node re-size is not working as expected

Question

I have defined an FXML with a GridPane of 8 rows, which holds the following components (FXML and CSS definitions are given at the end of this thread):

2 CheckBoxes,
2 Labels,
2 Labels With a Region and
2 Buttons with A Region

The Region here is used to load images into, which is done through a CSS style. For each set of the components defined above (for example the 2 Checkboxes), I take the one and I increased it's size by using the -fx-font-size styling. In particular, I define the font size to be "1.3xDefault_System_Font_Size (12)". The tags (INC) and (DEF) in text of each component, is used to describe whether the font size is increased or left to the default value.

As you can see from the above screenshot, the label of checkbox is increased but the box itself did not. The same applies for the images, that their size did not increase but the label size did.

This gets worse when I change the default font size in .root:

.root{
    -fx-font-size: 28;
}

In the example above, since I changed the default font size from 12 to 28, I expect all labels and images to change their size according to this new size. The image size is defined by the -fx-background-size which is 4em.

However, all the labels are increased correctly but the images are increased correctly only on those nodes with the DEF tag. The same applies for the checkbox, where it's label and box is increased on the DEF, whilst the one with the INC tag only label size increased correctly and the box remained small.

Is there a way to make images and box of checkbox to increase their size correctly? Is this a bug, or am I doing something wrong?

FXML: Gridpane

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane stylesheets="@css/Test.css" vgap="5.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ebay.client.controller.SettingsScreenController">
    <children>
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" styleClass="increased_font" text="CheckBox (Inc)" GridPane.rowIndex="1" />
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" text="CheckBox (Def)" GridPane.rowIndex="2" />
        <Label cache="true" styleClass="increased_font" text="Label (Inc)" GridPane.rowIndex="3" />
        <Label cache="true" text="Label (Def)" GridPane.rowIndex="4" />
        <Label cache="true" styleClass="increased_font" text="Label With Image (Inc)" GridPane.rowIndex="5">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Label cache="true" text="Label With Image (Def)" GridPane.rowIndex="6">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Button styleClass="increased_font" text="Button With Image (Inc)" GridPane.rowIndex="7">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
        <Button text="Button With Image (Def)" GridPane.rowIndex="8">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
    </children>
</GridPane>

CSS: Test.css

.increased_font {
    -fx-font-size: 1.3em;
}

.javasuns_logo {
    -fx-font-size: null;
    -fx-pref-height: 2em;
    -fx-pref-width: 4em;
    -fx-background-image: url('../../icons/logo/javasuns.png');
    -fx-background-size: 4em;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}

Bartek Bartek · Accepted Answer · 2018-01-15T10:27:42

What I found is that when you're using pref-height and pref-width you cannot use -fx-font-size in the same class cause it "resets" the .root -fx-font-size to the default value of 12.

I wanted to set specific font-size in some buttons as well as setting the width and height using the em values. It wasn't possible so I created a Label inside the element of Button and here I can resize the label font-size correctly. So if I don't use the font-size and pref-width/height in the same class/same control it looks like it's working.

JavaFX: Node re-size is not working as expected

1 Answers