title: How to scale control and layout it properly in javafx
body: <p>I want position Rating control (<a href="http://fxexperience.com/controlsfx/features/#rating" rel="nofollow">http://fxexperience.com/controlsfx/features/#rating</a>) as below:</p>
  
  <pre><code>&lt;HBox spacing="10.0" alignment="CENTER" &gt;
           &lt;children&gt;
              &lt;Label text="Rating" /&gt;
              &lt;Rating  fx:id="rating1" styleClass="scale-half" /&gt;
              &lt;Pane HBox.hgrow="ALWAYS"/&gt;
              &lt;Label text="Difficulty" /&gt;
              &lt;Rating  fx:id="rating2" styleClass="scale-half" /&gt;
           &lt;/children&gt;
  &lt;/HBox&gt;
  </code></pre>
  
  <p>and in css:</p>
  
  <pre><code>.scale-half {
      -fx-scale-x:0.5;
      -fx-scale-y:0.5;
  }
  </code></pre>
  
  <p>Original size of Rating control is to big for my purpouse, so I want to scale it.</p>
  
  <p>It is the problem, that after scalling, layout bounds of Rating's control is the same as without scalling.</p>
  
  <p>I tried wrap this control by Group container.</p>
  
  <p>That helped a little. Layout was ok, but after move mouse over the star in Rating control, shadow effect occurred and layout bounds increased.</p>
  
  <p>Entire HBox increased too, so the end effect was very bad: jittering layout.</p>
  
  <p>How to avoid that?</p>