title: JavaFX: Node re-size is not working as expected
body: <p>I have defined an FXML with a GridPane of 8 rows, which holds the following components (FXML and CSS definitions are given at the end of this thread):</p>
  
  <ul>
  <li>2 CheckBoxes, </li>
  <li>2 Labels, </li>
  <li>2 Labels With a Region and </li>
  <li>2 Buttons with A Region</li>
  </ul>
  
  <p>The Region here is used to load images into, which is done through a CSS style. For each set of the components defined above (for example the 2 Checkboxes), I take the one and I increased it's size by using the <strong>-fx-font-size</strong> styling. In particular, I define the font size to be <strong><em>"1.3xDefault_System_Font_Size (12)"</em></strong>. The tags <strong>(INC)</strong> and <strong>(DEF)</strong> in text of each component, is used to describe whether the font size is increased or left to the default value. </p>
  
  <p><a href="https://i.stack.imgur.com/QmHqr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QmHqr.png" alt="enter image description here"></a></p>
  
  <p>As you can see from the above screenshot, the label of checkbox is increased but the box itself did not. The same applies for the images, that their size did not increase but the label size did.</p>
  
  <p>This gets worse when I change the default font size in .root:</p>
  
  <pre><code>.root{
      -fx-font-size: 28;
  }
  </code></pre>
  
  <p>In the example above, since I changed the default font size from 12 to 28, I expect all labels and images to change their size according to this new size. The image size is defined by the <strong>-fx-background-size</strong> which is <strong>4em</strong>. </p>
  
  <p>However, all the labels are increased correctly but the images are increased correctly only on those nodes with the <strong>DEF</strong> tag. The same applies for the checkbox, where it's label and box is increased on the <strong>DEF</strong>, whilst the one with the <strong>INC</strong> tag only label size increased correctly and the box remained small.</p>
  
  <p><a href="https://i.stack.imgur.com/KQmx1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KQmx1.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to make images and box of checkbox to increase their size correctly? Is this a bug, or am I doing something wrong?</p>
  
  <p>FXML: Gridpane</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.geometry.Insets?&gt;
  &lt;?import javafx.scene.control.Button?&gt;
  &lt;?import javafx.scene.control.CheckBox?&gt;
  &lt;?import javafx.scene.control.Label?&gt;
  &lt;?import javafx.scene.layout.ColumnConstraints?&gt;
  &lt;?import javafx.scene.layout.GridPane?&gt;
  &lt;?import javafx.scene.layout.Region?&gt;
  &lt;?import javafx.scene.layout.RowConstraints?&gt;
  
  &lt;GridPane stylesheets="@css/Test.css" vgap="5.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ebay.client.controller.SettingsScreenController"&gt;
      &lt;children&gt;
          &lt;CheckBox nodeOrientation="RIGHT_TO_LEFT" styleClass="increased_font" text="CheckBox (Inc)" GridPane.rowIndex="1" /&gt;
          &lt;CheckBox nodeOrientation="RIGHT_TO_LEFT" text="CheckBox (Def)" GridPane.rowIndex="2" /&gt;
          &lt;Label cache="true" styleClass="increased_font" text="Label (Inc)" GridPane.rowIndex="3" /&gt;
          &lt;Label cache="true" text="Label (Def)" GridPane.rowIndex="4" /&gt;
          &lt;Label cache="true" styleClass="increased_font" text="Label With Image (Inc)" GridPane.rowIndex="5"&gt;
              &lt;graphic&gt;&lt;Region styleClass="javasuns_logo" /&gt;&lt;/graphic&gt;
          &lt;/Label&gt;
          &lt;Label cache="true" text="Label With Image (Def)" GridPane.rowIndex="6"&gt;
              &lt;graphic&gt;&lt;Region styleClass="javasuns_logo" /&gt;&lt;/graphic&gt;
          &lt;/Label&gt;
          &lt;Button styleClass="increased_font" text="Button With Image (Inc)" GridPane.rowIndex="7"&gt;
              &lt;graphic&gt;&lt;Region styleClass="javasuns_logo" /&gt;&lt;/graphic&gt;
          &lt;/Button&gt;
          &lt;Button text="Button With Image (Def)" GridPane.rowIndex="8"&gt;
              &lt;graphic&gt;&lt;Region styleClass="javasuns_logo" /&gt;&lt;/graphic&gt;
          &lt;/Button&gt;
      &lt;/children&gt;
  &lt;/GridPane&gt;
  </code></pre>
  
  <p>CSS: Test.css</p>
  
  <pre><code>.increased_font {
      -fx-font-size: 1.3em;
  }
  
  .javasuns_logo {
      -fx-font-size: null;
      -fx-pref-height: 2em;
      -fx-pref-width: 4em;
      -fx-background-image: url('../../icons/logo/javasuns.png');
      -fx-background-size: 4em;
      -fx-background-repeat: no-repeat;
      -fx-background-position: center;
  }
  </code></pre>