Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8205473

[CSS] Button size does not change relative to fonts

XMLWordPrintable

    • x86_64
    • windows_10

      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


            Unassigned Unassigned
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: