TextFlow vs TextArea, layout problems; why is TextFlow messing it where TextArea does not?

Question

Here is the original fxml file (imports omitted for brevity):

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
    minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0"
    xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
    fx:id="pane"
    fx:controller="com.github.parboiled1.grappa.debugger.mainwindow.MainWindowUi">
    <top>
        <MenuBar BorderPane.alignment="CENTER">
            <Menu mnemonicParsing="false" text="File">
                <!-- INJECTION -->
                <MenuItem fx:id="loadInput" mnemonicParsing="false"
                    text="Load file" onAction="#loadFileEvent"/>
                <MenuItem fx:id="parse" mnemonicParsing="false"
                    text="Parse" onAction="#parseEvent"/>
                <MenuItem fx:id="closeButton" mnemonicParsing="false"
                    text="Close" onAction="#closeWindowEvent"/>
            </Menu>
        </MenuBar>
    </top>
    <center>
        <SplitPane dividerPositions="0.5" prefHeight="160.0" prefWidth="200.0"
            BorderPane.alignment="CENTER">
            <SplitPane dividerPositions="0.5" orientation="VERTICAL">
                <TreeView fx:id="traceTree" prefHeight="200.0"
                    prefWidth="200.0" style="font-family: monospace"/>
                <TextArea fx:id="traceDetail" editable="false"
                    prefHeight="200.0" prefWidth="200.0"
                    style="-fx-font-family: monospace"/>
            </SplitPane>
            <!-- HERE -->
            <TextArea fx:id="inputText" prefHeight="200.0" prefWidth="200.0"/>
        </SplitPane>
    </center>
</BorderPane>

I want to perform text highlighting of part of the text in what is for now a TextArea with an fx:id of inputText. For this, I have been recommended to use a TextFlow instead of a TextArea. "XML comment": HERE.

I already have, at "XML comment" INJECTION, the means to fill the contents of inputText with the contents of a (text) file. This works fine with a TextArea.

Now, what I have done: I just replaced TextArea with TextFlow, adapted the code, and that's it. Nothing else.

And the layout gets messed up when I load a decently large text file. Before I load it, the layout is just fine:

Now I try and load a text file which is long enough so that it doesn't fit into the TextFlow as it is, and... This is what I get:

I have no such problem when using a TextArea. The latter will automatically "insert" (if that's the correct word) vertical and horizontal scrollbars, and will leave my MenuBar intact, thank you very much.

But a TextArea won't allow me to highlight only part of the text... Therefore I need a TextFlow.

How do I make a TextFlow behave, "layout-wise", as a TextArea?

Answer 1

TextArea implements its own scrollbars, allocating space for them and making them visible automatically when they are required. TextFlow is really just a plain layout manager, and doesn't do this. To put scroll bars on the TextFlow when they are needed, just wrap the TextFlow in a ScrollPane:

<ScrollPane>
    <TextFlow fx:id="inputText" ... />
</ScrollPane>

You actually have much more control over the scrollbars in this situation. For example, you can do

<ScrollPane fitToWidth="true">

and then the content (the TextFlow in this case) will have its width set to the width of the scroll pane (so there will never be horizontal scroll bars, only vertical ones). The ScrollPane Javadocs list all the properties, of course.