Click through empty areas in a JavaFX VBox - javafx

Question

I have a VBox that is in a BorderPane (on the left side) so it is automatically sized to the full BorderPane height. I place a number of panels in this VBox, but they do not take up the full height, meaning that there is some empty space at the bottom. The BorderPane is in turn in a StackPane, so there are layers "underneath" it.
What I would like is for mouse-clicks in this empty space to be passed through to the pane underneath the BorderPane. Web searches have led me to believe that the correct way to do this is to make the VBox transparent, and set it to pickOnBounds="false".
I have tried to make the VBox transparent with both style="-fx-background-color: rgba(0,0,0,0);" and opacity="0", but neither produces the required effect — it seems that even when transparent with pickOnBounds="false", the VBox still consumes mouse events in its empty area and does not allow them to fall through to the next layer down in the StackPane.
The following FXML illustrates the problem. Two toggle buttons are on the bottom layer of a StackPane. On the left-hand side, the button is covered by a VBox, and it cannot be clicked. On the right-hand side, the button is covered by an AnchorPane, and it can be clicked.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<StackPane fx:id="stackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane fx:id="anchorPane">
<children>
<ToggleButton mnemonicParsing="false" text="ToggleButton under VBox" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" />
<ToggleButton mnemonicParsing="false" text="ToggleButton under AnchorPane" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" />
</children>
</AnchorPane>
<BorderPane fx:id="borderPane" pickOnBounds="false" prefHeight="200.0" prefWidth="200.0">
<left>
<VBox fx:id="vBox" pickOnBounds="false" prefHeight="200.0" prefWidth="400.0" style="-fx-background-color: rgba(0,0,0,0);" BorderPane.alignment="CENTER">
<children>
<TitledPane animated="false" text="untitled">
<content>
<AnchorPane fx:id="pane1" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="400.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled">
<content>
<AnchorPane fx:id="pane2" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="400.0" />
</content>
</TitledPane>
</children>
</VBox>
</left>
<center>
<AnchorPane pickOnBounds="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</StackPane>
Is there any workaround for this problem?

Answer 1

Write:
-fx-background-color: null;
Instead of:
-fx-background-color: rgba(0,0,0,0);
I do not know why setting the background to null and not transparent works in this case (as I expected that the transparent background would also work fine).