[FIXED] Making an AnchorPane scrollable

Issue

Following is the fxml I am using for one of the Javafx forms:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane fx:id="CustomerAddLabel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" style="-fx-background-color: aliceblue; -fx-border-color: black; -fx-border-radius: 5;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="c195.View_Controller.CustomerScreenController">
    <children>
        <Label alignment="TOP_CENTER" layoutX="300.0" layoutY="14.0" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
            <font>
                <Font name="System Bold Italic" size="25.0" />
            </font>
        </Label>
        <AnchorPane layoutX="16.0" layoutY="102.0" prefHeight="404.0" prefWidth="363.0" style="-fx-background-color: white;">
            <children>
                <TableView fx:id="CustomerTable" layoutY="1.0" style="-fx-border-color: black; -fx-border-radius: 5;">
                    <columns>
                        <TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
                        <TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
                        <TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
                        <TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
                        <TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
                        <TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
                        <TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />

                    </columns>
                </TableView>
            </children>
        </AnchorPane>
     <ButtonBar layoutX="587.0" layoutY="564.0" prefHeight="40.0" prefWidth="200.0">

        </ButtonBar>
        <ButtonBar layoutX="500.0" layoutY="613.0" prefHeight="40.0" prefWidth="200.0">
            <buttons>
                <Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
                <Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
            </buttons>
        </ButtonBar>
        <Label fx:id="CustomerLabel" layoutX="542.0" layoutY="52.0" prefHeight="40.0" prefWidth="90.0" textFill="#1924e8">
            <font>
                <Font name="System Bold Italic" size="20.0" />
            </font>
        </Label>
    </children>
</AnchorPane>

Following is a snippet of the corresponding controller:

public class CustomerScreenController implements Initializable {
    @FXML
    private TableView<Customer> CustomerTable;
    @FXML
    private TableColumn<Customer, String> CustomerIDColumn;
    @FXML
    private TableColumn<Customer, String> CustomerNameColumn;
    @FXML
    private TableColumn<Customer, String> CustomerPhoneColumn;
    @FXML
    private TableColumn<Customer, String> CustomerAddressColumn;
    @FXML
    private TableColumn<Customer, String> CustomerPostalCodeColumn;
    @FXML
    private TableColumn<Customer, String> CustomerDivisionColumn;
    @FXML
    private TableColumn<Customer, String> CustomerCountryColumn;
    @FXML
    private Button CustomerBackButton;
    private Parent root;
    private Stage stage;
    private ObservableList<Customer> customerOL = FXCollections.observableArrayList();

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        PropertyValueFactory<Customer, String> custCustomerIDFactory = new PropertyValueFactory<>("customerID");
        PropertyValueFactory<Customer, String> custNameFactory = new PropertyValueFactory<>("customerName");
        PropertyValueFactory<Customer, String> custPhoneFactory = new PropertyValueFactory<>("phone"); //String value "CustomerPhone" calls getCustomerPhone method
        PropertyValueFactory<Customer, String> custCountryFactory = new PropertyValueFactory<>("country");
        PropertyValueFactory<Customer, String> custDivisionFactory = new PropertyValueFactory<>("division");
        PropertyValueFactory<Customer, String> custAddressFactory = new PropertyValueFactory<>("address");
        PropertyValueFactory<Customer, String> custPostalCodeFactory = new PropertyValueFactory<>("postalCode");

        CustomerIDColumn.setCellValueFactory(custCustomerIDFactory);
        CustomerNameColumn.setCellValueFactory(custNameFactory);
        CustomerPhoneColumn.setCellValueFactory(custPhoneFactory);
        CustomerCountryColumn.setCellValueFactory(custCountryFactory);
        CustomerDivisionColumn.setCellValueFactory(custDivisionFactory);
        CustomerAddressColumn.setCellValueFactory(custAddressFactory);
        CustomerPostalCodeColumn.setCellValueFactory(custPostalCodeFactory);
        try {
            updateCustomerTableView();

        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

My UI is appearing like this:


This is appearing cropped. And the full column name Country is not visible. But if I resize it to maximum, then I do see the buttons. How can I make it scrollable? Both
the full pane and the TableView inside it so that this issue doesn't appear on the screen.

Solution

It looks like you are using AnchorPane incorrectly. I would use VBox or BorderPane. This example uses VBox.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>


<VBox alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
         <font>
            <Font name="System Bold Italic" size="25.0" />
         </font>
         <VBox.margin>
            <Insets bottom="60.0" top="20.0" />
         </VBox.margin>
      </Label>
      <TableView fx:id="CustomerTable" style="-fx-border-color: black; -fx-border-radius: 5;" VBox.vgrow="ALWAYS">
         <columns>
            <TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
            <TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
            <TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
            <TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
            <TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
            <TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
            <TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />
         </columns>
         <VBox.margin>
            <Insets left="10.0" right="10.0" />
         </VBox.margin>
      </TableView>
      <ButtonBar>
         <buttons>
            <Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
            <Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
         </buttons>
         <VBox.margin>
            <Insets bottom="20.0" right="20.0" top="20.0" />
         </VBox.margin>
      </ButtonBar>
   </children>
</VBox>

Answered By - Sedrick