Auto-scroll on long inputs with JavaFX

[arkarsg]

I have been making some minor UI changes for GUI and I faced the following issue.

Issue

When there are long chunks of text displayed on the GUI, ScrollPane does not snap to the bottom.

Before

After

The after screenshot is immediately after I have typed in another command, as you can see from the Image of userDialog. Note: scroll bar was set to not show in this example.

Expected Behaviour

For ScrollPane to immediately snap to the bottom of DukeDialog, so that user does not have to scroll down after every response.

What I have tried

In MainWindow, the following is present, as per the tutorial:

scrollPane.vvalueProperty().bind(dialogContainer.heightProperty());

Following some posts on StackOverflow, I have also tried hardcoding the height property to 1.0d but this does not work either. I have also tried changing max_height and pref_height attributes via sceneBuilder.

MainWindow FXML

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

<?import javafx.geometry.Insets?>
<?import javafx.geometry.Point3D?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="duke.gui.MainWindow">
  <children>
    <TextField fx:id="userInput" layoutY="558.0" onAction="#handleUserInput" prefHeight="41.0" prefWidth="310.0" promptText="The Duke is listening..." style="-fx-background-radius: 10; -fx-background-insets: 5; -fx-min-height: 40; -fx-padding: 10;" AnchorPane.bottomAnchor="1.0">
         <font>
            <Font name="Menlo Regular" size="13.0" />
         </font>
      </TextField>
    <Button fx:id="sendButton" alignment="CENTER" contentDisplay="CENTER" layoutX="310.0" layoutY="562.0" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="33.0" prefWidth="86.0" style="-fx-background-radius: 15; -fx-background-color: #3D5A80;" text="Send" textAlignment="CENTER" textFill="WHITE">
         <font>
            <Font name="Menlo Regular" size="13.0" />
         </font>
      </Button>
    <ScrollPane fx:id="scrollPane" hbarPolicy="NEVER" hvalue="1.0" prefHeight="559.0" prefWidth="400.0" vbarPolicy="NEVER" vvalue="1.0">
      <content>
        <VBox fx:id="dialogContainer" fillWidth="false">
         </VBox>
      </content>
    </ScrollPane>
  </children>
</AnchorPane>

[daitenshionyan]

Hello I have looked through your code and I think the only issue is that the initialise method is supposed to be spelled as initialize (Z instead of S). This is in line 35 of MainWindow. I was able to get the auto scrolling to work by changing that.

[arkarsg]

Interesting! It works now. Thank you.