JavaFX - BorderPane, ensuring that Right Pane gets always a minimum width

Question

I have the following JavaFX FXML structure:

<BorderPane fx:id="mainWindow" prefHeight="500.0" prefWidth="800.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml/1">

    <stylesheets>
        <URL value="@mainwindow.css"/>
    </stylesheets>

    <top>
        <fx:include fx:id="buttonPanel" source="/com/example/app/chart/buttons/buttonPanel.fxml" />
    </top>
    <center>
        <BorderPane fx:id="chartContainer">
            <center>
                <fx:include fx:id="chartPanel" source="/com/example/app/chart/chartpanel/chartPanel.fxml" />
            </center>
            <right>
                <fx:include fx:id="rightAxisPanel" source="/com/example/app/chart/rightaxis/rightAxisPanel.fxml" />
            </right>
        </BorderPane>
    </center>

</BorderPane>

Being chartPanel and rightAxisPanel :

<AnchorPane fx:id="chartPanel" styleClass="chartPanelClass" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@chartpanel.css"/>
    </stylesheets>
</AnchorPane>

and

<AnchorPane fx:id="rightAxisPanel" prefWidth="100.0" minWidth="100.0" styleClass="rightAxisPanelClass" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@rightaxispanel.css"/>
    </stylesheets>
</AnchorPane>

This generates the following figure:

So far, so good.

But if I reduce the size of the window, the right panel is the one that is truncated -see how yellow area which corrsponds to the rigthAxisPanel is truncated-.

How can I do to get the central panel the one being truncated?

Answer 1

The minimal width of the center AnchorPane prevents it from shrinking. Set the value to 0 to make sure it's allowed to shrink.

Furthermore you should apply a clip to the AnchorPane to avoid it's content from showing up to the right of it's right bound. This could happen, if you use (half) transparent background on the right, change the viewOrder or if you put a right node in the outer BorderPane .

<AnchorPane fx:id="chartPanel" styleClass="chartPanelClass" xmlns:fx="http://javafx.com/fxml/1" minWidth="0">
    <stylesheets>
        <URL value="@chartpanel.css"/>
    </stylesheets>
    <clip>
        <Rectangle width="${chartPanel.width}" height="${chartPanel.height}"/>
    </clip>
</AnchorPane>