JavaFX JFXDrawer not hidden completely when program starts

Question

I'm trying to add a JFXDrawer to my program which I have succeeded in doing that however I have only one issue that I cannot figure out why its happening. When my program first runs the JFXDrawer should be completely hidden and shown when I click on the Hamburger button but if you look at the below image the red space highlighted(which I added as a background color for the drawer to make it clear), that space is always shown when the program starts but when I click on the hamburger to open and close it returns normal hidden, its just on startup.

This is how its working now: The following is a reproducible example code:

NavigationDrawerTest

    public class NavigationDrawerTest extends Application {
    
    @Override
    public void start(Stage stage) throws IOException {
        
        Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
        
        Scene scene = new Scene(root);
        stage.initStyle(StageStyle.UNDECORATED);
        stage.setScene(scene);
        
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

MainController:

public class MainController implements Initializable {

    /**
     * Initializes the controller class.
     */
    @FXML
    private AnchorPane anchorPane;

    @FXML
    private JFXHamburger hamburger;

    @FXML
    private JFXDrawer drawer;
    @Override
    public void initialize(URL url, ResourceBundle rb) {
    try {
            // TODO
            VBox box = FXMLLoader.load(getClass().getResource("NavDrawer.fxml"));
            drawer.setSidePane(box);
            
        } catch (IOException ex) {
            Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
        }
        HamburgerSlideCloseTransition task = new HamburgerSlideCloseTransition(hamburger);
        task.setRate(-1);
        hamburger.addEventHandler(MouseEvent.MOUSE_CLICKED, (Event event) -> {
            drawer.toggle();
        });
        drawer.setOnDrawerOpening((event) -> {
            task.setRate(task.getRate() * -1);
            task.play();
            drawer.setMinWidth(220);
        });
        drawer.setOnDrawerClosed((event) -> {
            task.setRate(task.getRate() * -1);
            task.play();
            drawer.setMinWidth(0);
        });    
    }
}

Main.fxml

<BorderPane maxHeight="790.0" maxWidth="1280.0" prefHeight="790.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="navigationdrawertest.MainController">
   <center>
      <AnchorPane id="AnchorPane" fx:id="anchorPane" prefHeight="720.0" prefWidth="1280.0">
         <children>
            <JFXHamburger fx:id="hamburger" layoutX="14.0" layoutY="14.0" />
            <JFXTextField fx:id="tf_search" focusColor="#ffc107" layoutX="80.0" layoutY="54.0" prefHeight="40.0" prefWidth="925.0" promptText="SEARCH HERE" unFocusColor="#c5c5c5" AnchorPane.leftAnchor="80.0" AnchorPane.rightAnchor="80.0" AnchorPane.topAnchor="54.0">
               <font>
                  <Font name="Exo Regular" size="18.0" />
               </font>
            </JFXTextField>
            <TableView fx:id="personTable" layoutX="80.0" layoutY="132.0" prefHeight="577.0" prefWidth="1040.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="152.0">
               <columns>
                  <TableColumn fx:id="T1Column" editable="false" prefWidth="195.0" sortType="DESCENDING" text="T1" />
                  <TableColumn fx:id="T2Column" editable="false" minWidth="6.0" prefWidth="220.0" sortType="DESCENDING" text="T2" />
                  <TableColumn fx:id="T3Column" editable="false" prefWidth="97.0" sortType="DESCENDING" text="T3" />
               </columns>
            </TableView>
         </children>
      </AnchorPane>
   </center>
   <left>
      <JFXDrawer fx:id="drawer" defaultDrawerSize="220.0" prefWidth="0.0" style="-fx-background-color: red;" BorderPane.alignment="CENTER" />
   </left>
   
</BorderPane>

NavDrawer.fxml

<VBox style="-fx-background-color: black;" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="navigationdrawertest.NavDrawerController">
   <children>
      <JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0"  prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 1" textFill="#c1fff9">         
         <padding>
            <Insets bottom="5.0" left="30.0" top="5.0" />
         </padding>
      </JFXButton>
      <JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="10.0"  prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 2" textFill="#c1fff9">         
         <padding>
            <Insets bottom="5.0" left="30.0" top="5.0" />
         </padding>
      </JFXButton>
      <JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="45.0"  prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 3" textFill="#c1fff9">         
         <padding>
            <Insets bottom="5.0" left="30.0" top="5.0" />
         </padding>
      </JFXButton>
      <JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="80.0"  prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 4" textFill="#c1fff9">         
         <padding>
            <Insets bottom="5.0" left="30.0" top="5.0" />
         </padding>
      </JFXButton>
      <JFXButton alignment="BASELINE_LEFT" focusTraversable="false" graphicTextGap="15.0" layoutX="10.0" layoutY="115.0"  prefHeight="32.0" prefWidth="220.0" ripplerFill="WHITE" text="Button 5" textFill="#c1fff9">
         <padding>
            <Insets bottom="5.0" left="30.0" top="5.0" />
         </padding>
      </JFXButton>
   </children>
</VBox>

NavDrawerController

public class NavDrawerController implements Initializable {


    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

    
}

I have also tried using stackpane and the a border pane within it as I have seen on some tutorials but still getting same problem.

Unfortunately there aren't much examples regarding using JFXDrawer which i'm not sure why.

score 0 · Answer 1 · answered Jun 16 '20 at 13:20

I have managed to solve it thankfully, hwowver I'm not sure of that's the best way to solve it. If anyone has a better solution for it please share it. so I just added this line of code in the MainController:

drawer.setMinWidth(0);

so the MainController should look like this:

@Override
    public void initialize(URL url, ResourceBundle rb) {
    try {
            // TODO
            VBox box = FXMLLoader.load(getClass().getResource("NavDrawer.fxml"));
            drawer.setSidePane(box); 
            drawer.setMinWidth(0); // this is the new code added

        } catch (IOException ex) {
            Logger.getLogger(MainController.class.getName()).log(Level.SEVERE, null, ex);
        }
        HamburgerSlideCloseTransition task = new HamburgerSlideCloseTransition(hamburger);
        task.setRate(-1);
        hamburger.addEventHandler(MouseEvent.MOUSE_CLICKED, (Event event) -> {
            drawer.toggle();
        });
        drawer.setOnDrawerOpening((event) -> {
            task.setRate(task.getRate() * -1);
            task.play();
            drawer.setMinWidth(220);
        });
        drawer.setOnDrawerClosed((event) -> {
            task.setRate(task.getRate() * -1);
            task.play();
            drawer.setMinWidth(0);
        });    
    } }

Probably the longest question I have seen so far which manages to not mention the framework which this is all about with a single word. This is not plain JavaFX. So one should probably mention that this question is all about JFoenix. — mipa, Jun 16 '20 at 16:36
@mipa thank you for mentioning the tag that I forgot to add I have edited my questions, however I am not sure why you think it is the longest question as just have added a reproducible example and the questions is the top paragraph — Kay, Jun 18 '20 at 14:32
I did not say that it is exceptionally long compared to other questions, but just think of somebody who reads all this and even in the end he still does not know where this ominous JFXDrawer actually comes from. The library you are talking about all the time should be one of the first things to mention. — mipa, Jun 18 '20 at 19:41
@mipa thats true..good point mentioned..thank you I'll make sure I'm aware of that next time I need help — Kay, Jun 25 '20 at 15:52

score 0 · Answer 2 · edited Jan 31 '22 at 00:11

I might be years late, so this is for anyone coming here with this problem. This is the easiest way to do it. select your JFXDrawer in Scenebuilder then under the properties tab on the right of your screen, there's a field labelled "Default Drawer Size".

There it is, third from the top :)

in that field, enter the exact width of the parent container of your fxml. In the question above, use the width of the parent pane in NavDrawer.fxml ...and there you have it.

JavaFX JFXDrawer not hidden completely when program starts

2 Answers2