JDK-8205473 : [CSS] Button size does not change relative to fonts
  • Type: Bug
  • Component: javafx
  • Sub-Component: controls
  • Affected Version: 8,9,10,openjfx11
  • Priority: P4
  • Status: Closed
  • Resolution: Duplicate
  • OS: windows_10
  • CPU: x86_64
  • Submitted: 2018-06-07
  • Updated: 2021-11-01
  • Resolved: 2021-11-01
Related Reports
Duplicate :  
Relates :  
Description
A DESCRIPTION OF THE PROBLEM :
By using of a base.css with .root -> -fx-font-size = n and different padding/spacing/insets/radius/min/max/pref/etc-sizes + -fx-font-size  in “em” allows to have root-font-size depending controls in a JavaFX application. For example for a button:

.root {
    -fx-font-size: 14px;
}

.button {
    -fx-font-family: "Arial";
    -fx-font-weight: bold;
    -fx-font-size: 2em;

    -fx-min-width: 10em;
    -fx-max-width: 10em;
    -fx-pref-width: 10em;

    -fx-min-height: 10em;
    -fx-max-height: 10em;
    -fx-pref-height: 10em;
}


If to change 

.root {
    -fx-font-size: 12px;
}

The javafx-scene will adapt proportional.

And it allows to simulate a zooming/scaling of the javafx-scene via adding of several zoom_x.css to the JavaFX Scene/Parent Stylesheets like:

zoom_65.css:
.root {
    -fx-font-size: 9;
}

zoom_85.css:
.root {
    -fx-font-size: 12;
}

zoom_150.css:
.root {
    -fx-font-size: 21;
}

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

But the behavior in this case with a button is different as expected – the font-size of the button-text is adapted proportional, but the min/max/pref-sizes remain the same and still be unchanged.
The reason in the:

.button -fx-font-size: 2em;

Because the javafx.scene.CssStyleHelper has in the code-line 1388:

boolean isFontProperty = "-fx-font".equals(property) || "-fx-font-size".equals(property);

then  1392:

boolean isRelative = ParsedValueImpl.containsFontRelativeSize(resolved, isFontProperty);

and 1444:

// did we get a fontValue from the preceding block?
// if not, get it from our cacheEntry or choose the default
if (fontForFontRelativeSizes == null) {
    if (fontFromCacheEntry != null && fontFromCacheEntry.isRelative() == false) {
        fontForFontRelativeSizes = (Font)fontFromCacheEntry.getValue();
    } else {
        fontForFontRelativeSizes = Font.getDefault();
    }
}

It means, for the -fx-font-size: 2em; it is isFontProperty and isRelative, therefore  will be recalculated according the actual .root -fx-font-size from a zoom_xyz.css.
But for the -fx-min-width: 10em; it is NOT isFontProperty, but isRelative, and for recalculating will be used fontForFontRelativeSizes = Font.getDefault();
It is the constant and as default it is 12px for Windows OS and 13px for MacOs.
Therefore, the button size remains the same.

These all padding/spacing/insets/radius/min/max/pref/etc-sizes must be based on a current .root -> -fx-font-size and recalculated.


CUSTOMER SUBMITTED WORKAROUND :
To define a .control the -fx-font-size: XXXem; deeply, for example for .text like:

.button {
    -fx-font-family: "Arial";
    -fx-font-weight: bold;

    -fx-min-width: 10em;
    -fx-max-width: 10em;
    -fx-pref-width: 10em;

    -fx-min-height: 10em;
    -fx-max-height: 10em;
    -fx-pref-height: 10em;
}

.button .text {
    -fx-font-size: 2em;
}

Then the -fx-font-size: 2em; belongs only to the .text-class and doesn’t influence on the higher .button-class.

FREQUENCY : always



Comments
This is a duplicate of JDK-8204568.
01-11-2021

Submitter has provided the test case. " To reproduce the bug just open it and start. The expected behavior is after using of the workaround in the base.css: To comment -fx-font-size: 2em; for .button, .toggle-button, .menu-button And to uncomment it for the .button.text, .toggle-button.text, .menu-button.text: .button .text, .toggle-button .text, .menu-button .text { -fx-font-size: 2em; } " Same behavior in JDK 8GA, 8u172, 10+46, 11-ea+13 when ran attached test case in windows 10.
21-06-2018