The <size> JavaFX CSS data type is the most common data type in JavaFX CSS and is used to define lengths and proportions. It represents an interchangeable measurement in either <length> or <percentage>

The <size> is used to define font sizes, color stops, widths, heights, image, background, inset and padding sizes. In some cases, such as defining gradients, negative values can be useful. In some cases, a negative value will result in an error. Check out the individual entries for <length> and <percentage> for some examples, as well as the entries for the individual CSS Properties to see which values are acceptable.

The <size> data type is similar to the web-CSS data type <length-percentage>.

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

Warning

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

Syntax

/*  Valid Syntax  */
100      No unit is specified, so pixels is assumed
99.6%    Percentages
5px      Pixels
1em      Font sizes relative to calculated size of element
2ex      Relative to "x" in this font and calculated font size
12pt     Point-based sizes 
1px      Picas (1pc = 12pt)
5in      Inches
7cm      Centimetres
75mm     Millimetres

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.

<size> can have the following values:

ValueDescription
<number>If no units are provided, the size is assumed to be in pixels
<length>A unit of length specified as a <number> and a unit of length
<percentage>A unit of length as a percentage

Example

Size can be used to define font sizes, lengths and proportions.

CSS:

.content{
    -fx-font-size: 0.9pc;
    -fx-max-width: 250px;
    -fx-pref-height: 150; /* No units - pixels assumed */
}

.label{
    -fx-font-size: 1.2em;
    -fx-background-color: #fcc200;
    -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="Font size defined in em" />
   <Slider />
   <TextArea styleClass="content" text="Width and height defined in pixels. Font size defined in pica." wrapText="true" />
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
    </padding>
</VBox>

See Also