The <percentage> JavaFX CSS data type is commonly used to define lengths and proportions in JavaFX.

As with the <length> data type (which can often be substituted for a measurement in percent), the <percentage> data type can often be substituted for a measurement in <length>. JavaFX refers to this interchangeable data type as <size>, which is similar to the web-CSS data type <length-percentage>.

There are times, such as when using the hsb() function to define a <color> data type, where specifically a percentage is required. Check out the documentation for individual JavaFX CSS properties if you are unsure which data type is appropriate.

When defining a <percentage>, developers must specify a <number> followed by the percentage sign % with no space. If no unit is specified, the data type is assumed to be that of <length> and the unit px is assumed, which is often undesirable.

Warnings:

This CSS data type has the associated warnings:

Sizing

Although the <percentage> data type can be used to specify the size of a node (for example, -fx-pref-width accepts a <size> data type), this will not size the node relative to the parent.

JavaFX operates its layout hierarchy differently to HTML, where parent-centric sizing behaviour is common. In HTML, layout elements are sized ‘top-down’, assuming the <body> element is initially the size of the window. In JavaFX, layout is more ‘bottom-up’, with parent nodes trying to accommodate the preferred size of their children before determining their own preferred size, and so on.

For that reason, JavaFX doesn’t support parent-based relative widths and heights out of the box with CSS and developers should instead use binding to achieve this result

Behaviour

Although the <percentage> data type can be defined as both a positive and a negative value, there are a lot of cases where a negative value doesn’t make sense, or will yield unwanted results. Some examples of this are:

  • If applying a <percentage> to the -fx-border-radius or -fx-background-radius properties, a negative <percentage> will incur the following warning: WARNING: Caught java.lang.IllegalArgumentException: No radii value may be < 0

As a rule, heights, widths, sizes (including fonts), radii and padding and spacing properties should not be negative. Insets and coordinates for color stops can be.

Syntax

/*  Valid Syntax  */
100%     Whole number percentages
-100%    Negative number percentages
20.5%    Floating point value percentages
.75%     Floating point value percentages with no leading digits

Values

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

<percentage> can have the following values:

ValueDescription
[<number>][%]A <number> followed by a mandatory percentage signNo space between the number and the units.

Example

The percentage data type can be used to define node dimensions as well as font sizes and gradients

CSS:

.content{
    -fx-background-color: linear-gradient(from -20% -20% to 120% 120%, #375fcb, #DBE2F6 25%, #DBE2F6 75%, #375fcb);
    -fx-pref-height: 100;
}

.label{
    -fx-background-color: linear-gradient(to right, #fcc200, #FEEBAA 25%, #FEEBAA 75%, #fcc200);
    -fx-font-size: 1.2em;
    -fx-font-weight: bold;
}

FXML:

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox alignment="TOP_CENTER" prefHeight="250.0" prefWidth="300" spacing="25.0" stylesheets="@../css/styles.css"
      xmlns="http://javafx.com/javafx/10.0.2-internal">
    <Label alignment="CENTER" maxWidth="300" text="Color gradient specified using <percentage> data type" textAlignment="CENTER" wrapText="true" />
   <Slider />
   <TextArea styleClass="content" text="The background of this area is similar to the linear gradient used in the title, but extends from (-20% -20%) to (120% 120%). This stretches the edges of the gradient larger than the size of the area." wrapText="true" />
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
    </padding>
</VBox>

See Also