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:
Value | Description |
---|---|
[<number>][%] | A <number> followed by a mandatory percentage signNo space between the number and the units. |
Example

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>