Javafx Jfoenix Drawer is blocking the nodes behind the Overlay

Question

I am new to Javafx and after some readings on the subject I decided to start building my first application.

My application has a main page and an hamburgerDrawer on left side panel. The trouble I am having is that when I load the application, the drawer overlay is blocking the nodes beneath it. I tried to use the method SetDefaultDrawerSize() to 0 when I close the drawer, and to a specific size, say SetDefaultDrawerSize(900), with no success, the drawer is still blocking the content beneath.

@Override
public void initialize(URL url, ResourceBundle rb) {
try {
  AnchorPane drawerContent = FXMLLoader.load(getClass().getResource("/materialitemtracker/view/AnchorPaneHamburgerDrawerView.fxml"));

  hamburgerDrawer.setSidePane(drawerContent);
  hamburgerDrawer.setOverLayVisible(true);
  hamburgerDrawer.setResizableOnDrag(true);
  HamburgerBackArrowBasicTransition burgerTask = new HamburgerBackArrowBasicTransition(hamburger);
  burgerTask.setRate(-1);
  hamburger.addEventHandler(MouseEvent.MOUSE_PRESSED, (e) -> {

    burgerTask.setRate(burgerTask.getRate() * -1);
    burgerTask.play();

    if (hamburgerDrawer.isShown()) {

      hamburgerDrawer.close();
      // hamburgerDrawer.setDefaultDrawerSize(0);
    } else {
      hamburgerDrawer.open();
      // hamburgerDrawer.setDefaultDrawerSize(900);
    }
  });

} catch (IOException ex) {
  Logger.getLogger(AnchorPaneMainController.class.getName()).log(Level.SEVERE, null, ex);
}


   

Sample images:

Application Main Page

Drawer content

Answer 1

I had a similar issue to the one you describe. However in my case it wasn't the overlay but the drawer itself. The overlay when visible would encompass the entire UI when visible so I quickly determined that this wasn't my issue since it was only the buttons on the left of the UI which were not receiving events. Instead it seemed the area affected was limited the default drawer size I had set.

There are two solutions i could see:

1. Move the buttons above the drawer in the UI structure. This didn't work for me since the buttons would then overlap the expanded drawer in my UI.

2. Give the drawer a negative offset and change the constraints depending on the drawer state at runtime. My drawer resides on the left of the UI inside an AnchorPane so set a negative left anchor value to begin with (-255 for this example). Then depending on the state I do as follows.

   drawer.setOnDrawerOpening(event ->
   {
       AnchorPane.setRightAnchor(drawer, 0.0);
       AnchorPane.setLeftAnchor(drawer, 0.0);
       AnchorPane.setTopAnchor(drawer, 0.0);
       AnchorPane.setBottomAnchor(drawer, 0.0);
   });
   
   drawer.setOnDrawerClosed(event ->
   {
       AnchorPane.clearConstraints(drawer);
       AnchorPane.setLeftAnchor(drawer, -255.0);
       AnchorPane.setTopAnchor(drawer, 0.0);
       AnchorPane.setBottomAnchor(drawer, 0.0);
   });
   

Answer 2

Try the following code:

if (drawer.isOpened()) {
    drawer.close();
    drawer.setVisible(false);
} else {
    drawer.setVisible(true);
    drawer.open();
}