title: GridPane within a ScrollPane
body: <p>I wrapped a <code>GridPane</code> in a <code>ScrollPane</code> to be able to scroll it when new rows are added to the Grid.</p>
  
  <pre><code>&lt;BorderPane fx:id="SubmitStageBorderPane" 
  stylesheets="@../SubmitStageStyles.css" 
  xmlns="http://javafx.com/javafx/8.0.112-ea" 
  xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.SubmitStage"&gt;
     &lt;center&gt;
    &lt;AnchorPane fx:id="SubmitStageAnchorPane"&gt;
       &lt;children&gt;
          &lt;ScrollPane fx:id="GridscPane" hbarPolicy="NEVER" vbarPolicy="ALWAYS"&gt;
             &lt;content&gt;
                &lt;GridPane fx:id="submitLayout" maxHeight="1080.0" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="700.0" stylesheets="@../SubmitStageStyles.css"&gt;
                  &lt;columnConstraints&gt;
                    &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                      &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                      &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                      &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                      &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                  &lt;/columnConstraints&gt;
                  &lt;rowConstraints&gt;
                      &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                    &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                                &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                    &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                      &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                      &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                      &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                  &lt;/rowConstraints&gt;
                   &lt;children&gt;
                      &lt;TextField fx:id="course1" promptText="Course name" GridPane.rowIndex="1"&gt;
                         &lt;opaqueInsets&gt;
                            &lt;Insets /&gt;
                         &lt;/opaqueInsets&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="course2" promptText="Cource name" GridPane.rowIndex="2"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="course3" promptText="Course name" GridPane.rowIndex="3"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="course4" promptText="Course name" GridPane.rowIndex="4"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="1"&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="2"&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="3"&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Grade:" GridPane.columnIndex="1" GridPane.rowIndex="4"&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                      &lt;/Label&gt;
                      &lt;TextField fx:id="grade1" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="1"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="grade2" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="2"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="grade3" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="3"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="grade4" promptText="Enter the grade" GridPane.columnIndex="2" GridPane.rowIndex="4"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="1"&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="2"&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="3"&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                      &lt;/Label&gt;
                      &lt;Label alignment="CENTER_RIGHT" contentDisplay="CENTER" text="Credits:" GridPane.columnIndex="3" GridPane.rowIndex="4"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                         &lt;padding&gt;
                            &lt;Insets bottom="10.0" left="10.0" right="15.0" top="10.0" /&gt;
                         &lt;/padding&gt;
                         &lt;font&gt;
                            &lt;Font name="Eras Demi ITC" size="21.0" /&gt;
                         &lt;/font&gt;
                      &lt;/Label&gt;
                      &lt;TextField fx:id="credit1" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="1"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="credit2" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="2"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="credit3" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="3"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                      &lt;TextField fx:id="credit4" promptText="Course credit" GridPane.columnIndex="4" GridPane.rowIndex="4"&gt;
                         &lt;GridPane.margin&gt;
                            &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
                         &lt;/GridPane.margin&gt;
                      &lt;/TextField&gt;
                   &lt;/children&gt;
                   &lt;opaqueInsets&gt;
                      &lt;Insets /&gt;
                     &lt;/opaqueInsets&gt;
                   &lt;padding&gt;
                      &lt;Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /&gt;
                   &lt;/padding&gt;
                &lt;/GridPane&gt;
             &lt;/content&gt;
          &lt;/ScrollPane&gt;
          &lt;Button fx:id="AddAnotherCourseButton" alignment="BOTTOM_CENTER" mnemonicParsing="false" onAction="#AddAnotherCourseClicked" text="ADD ANOTHER COURSE"&gt;
             &lt;font&gt;
                &lt;Font name="Book Antiqua Bold" size="15.0" /&gt;
             &lt;/font&gt;
          &lt;/Button&gt;
       &lt;/children&gt;
    &lt;/AnchorPane&gt;
  &lt;/center&gt;
  &lt;top&gt;
    &lt;MenuBar fx:id="SubmitStageMenuBar" BorderPane.alignment="CENTER"&gt;
      &lt;menus&gt;
          &lt;Menu mnemonicParsing="false" text="File"&gt;
            &lt;items&gt;
              &lt;MenuItem mnemonicParsing="false" text="Save" /&gt;
                &lt;MenuItem mnemonicParsing="false" text="Load" /&gt;
                &lt;SeparatorMenuItem mnemonicParsing="false" /&gt;
                &lt;MenuItem mnemonicParsing="false" text="Exit" /&gt;
            &lt;/items&gt;
          &lt;/Menu&gt;
          &lt;Menu mnemonicParsing="false" text="About"&gt;
            &lt;items&gt;
              &lt;MenuItem mnemonicParsing="false" text="Action 1" /&gt;
            &lt;/items&gt;
          &lt;/Menu&gt;
      &lt;/menus&gt;
    &lt;/MenuBar&gt;
  &lt;/top&gt;
  &lt;/BorderPane&gt;
  </code></pre>
  
  <p>I have a button that whenever it's clicked, a row with elements is added to the <code>GridPane</code>.</p>
  
  <pre><code>public void AddAnotherCourseClicked(){
  
      int rowCount = returnMaxRow();
  
      TextField courseName = new TextField();
      courseName.setPromptText("Course name");
      submitLayout.setMargin(courseName, new Insets(5, 5, 5, 5));
  
      Label gradeLabel = new Label("Grade:");
      gradeLabel.setFont(Font.font("Eras Demi ITC", 21));
      submitLayout.setMargin(gradeLabel, new Insets(5, 5, 5, 5));
      gradeLabel.setPadding(new Insets(10, 10, 15, 10));
  
      TextField gradeReceived = new TextField();
      gradeReceived.setPromptText("Enter the grade");
      submitLayout.setMargin(gradeReceived, new Insets(5, 5, 5, 5));
  
      Label creditsLabel = new Label("Credits:");
      creditsLabel.setFont(Font.font("Eras Demi ITC", 21));
      submitLayout.setMargin(gradeLabel, new Insets(5, 5, 5, 5));
      creditsLabel.setPadding(new Insets(10, 10, 15, 10));
  
      TextField courseCredit = new TextField();
      courseCredit.setPromptText("Course credit");
      submitLayout.setMargin(courseCredit, new Insets(5, 5, 5, 5));
  
      submitLayout.addRow(rowCount+1, courseName, gradeLabel, gradeReceived, creditsLabel, courseCredit);
  }
  
  private int returnMaxRow(){
      int rowNum, lastRow = 0;
      for(Node element : submitLayout.getChildren()){
          rowNum = submitLayout.getRowIndex(element);
          lastRow = (rowNum &gt; lastRow ? rowNum : lastRow);
      }
      return lastRow;
  }
  </code></pre>
  
  <p>Thus far, the <code>ScrollBar</code> is added however, when i press the button, the rows are simply clustered together, and the <code>ScrollBar</code> doesn't extend, its height remains the same. </p>