title: How do I make my VBox and Label resize according to texts in label in JavaFx?
body: <p><a href="https://i.stack.imgur.com/UiKDb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UiKDb.png" alt="enter image description here"></a></p>
  
  <p>As you can see, my texts are constrained by <code>label</code>s. How do I make the <code>label</code> resize to exactly fit the text and also to resize the <code>VBox</code> and <code>GridPane</code> accordingly. I only want to resize vertically.</p>
  
  <p>My FXML:</p>
  
  <pre><code>&lt;VBox fx:id="body"
      alignment="TOP_CENTER"
      prefHeight="150"
      GridPane.vgrow="SOMETIMES"
      prefWidth="300"
      GridPane.columnIndex="0"
      GridPane.rowIndex="1" spacing="5"&gt;
  
      &lt;Label alignment="CENTER" textAlignment="JUSTIFY" fx:id="word" maxWidth="268"/&gt;
      &lt;Pane prefHeight="10" VBox.vgrow="NEVER"/&gt;
      &lt;Label alignment="CENTER" textAlignment="JUSTIFY" wrapText="true" fx:id="meaning" maxWidth="268"  /&gt;
      &lt;Label alignment="CENTER"  textAlignment="JUSTIFY" wrapText="true" fx:id="sentence" maxWidth="268" /&gt;
  
  &lt;/VBox&gt;
  </code></pre>
  
  <p>This <code>VBox</code> is inside the <code>GridPane</code>:</p>
  
  <pre><code>&lt;GridPane fx:id="base"
        alignment="CENTER"
        prefHeight="210.0"
        maxWidth="310.0"
        stylesheets="@style.css"
        vgap="0" xmlns="http://javafx.com/javafx/8"
        xmlns:fx="http://javafx.com/fxml/1"
        fx:controller="sample.Controller"&gt;
  ...
  </code></pre>
  
  <p><strong>Minimal, Complete, and Verifiable example</strong> as requested by @James_D</p>
  
  <p>Main Class:</p>
  
  <pre><code>public class Main extends Application {
  private Stage stage;
  private StackPane stackPane;
  @Override
  public void start(Stage primaryStage) throws Exception{
      stage = primaryStage;
      FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
      Parent root = (Parent) loader.load();
      stackPane = new StackPane(root);
      Scene scene = new Scene(stackPane);
      scene.setFill(Color.WHITE);
      stage.setScene(scene);
      stage.show();
  }
  
  
  public static void main(String[] args) {
      launch(args);
  }
  }
  </code></pre>
  
  <p>Controller Class:</p>
  
  <pre><code>public class Controller implements Initializable{
      @FXML private Label label1;
      @FXML private Button changeLabel;
      private StringProperty labelString = new SimpleStringProperty();
  
      @Override
      public void initialize(URL location, ResourceBundle resources) {
          labelString.setValue("aasdasd sad asdasd asdasda");
          label1.textProperty().bind(labelString);
  
      }
      @FXML
      public void clicked(MouseEvent e){
          labelString.setValue("asdsadasd asdasdasd sfdgsfwoef fgtrhfgbdrgdf dfgdfivbjkfd gdfgidfjvdf gdfgjldkvbdf gjdilgjdfv dfgojdflkgdf ");
      }
  }
  </code></pre>
  
  <p>sample.fxml:</p>
  
  <pre><code>&lt;GridPane fx:controller="sample.Controller"
        xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" maxHeight="Infinity"&gt;
  &lt;children&gt;
      &lt;VBox fx:id="body"
            alignment="CENTER"
            maxHeight="Infinity"
            GridPane.vgrow="SOMETIMES"
            prefWidth="300"
            GridPane.columnIndex="0"
            GridPane.rowIndex="1" spacing="5"&gt;
  
      &lt;Label alignment="CENTER" VBox.vgrow="ALWAYS" wrapText="true" textAlignment="CENTER" fx:id="label1" maxWidth="268"/&gt;
      &lt;Button fx:id="changeLabel" text="Change" minWidth="50" onMouseClicked="#clicked" maxWidth="Infinity" /&gt;
      &lt;/VBox&gt;
  &lt;/children&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Expectation:</strong>
  When I press 'Change' button, Everything should resize to just give enough space for text to be shown.</p>
  
  <p><strong>Problem:</strong>
  When I press 'Change' button, UI remains same not showing the full text.</p>