如何使用JavaFX消除（或着色）子菜单的页边距？

Question

Can anyone give an advice on what to do to get rid of the white margins of a submenu (or at least how can I change margin's color)? I tried:

• "-fx-indent: 0px;"
• "-fx-start-margin: 0px;"
• "-fx-end-margin: 0px;"
• "-fx-padding: 0px;"

but nothing seems to work

The class looks like this:

public static void assembleMenuPane(VBox masterPane) {
    ArrayList<String> list = new ArrayList<String>() {{
        add("A");
        add("B");
        add("C");
    }};

    Menu menuOptions = new Menu("Options");
    menuOptions.setStyle("-fx-font-size:12; -fx-background-color: #c9c9c9;");

    Menu menuOptionsChild = new Menu("Opt_1");
    menuOptionsChild.setStyle("-fx-border-color: yellow;" +
            " -fx-background-color: red;" +
            " -fx-indent: 0px;" +
            " -fx-start-margin: 0px;" +
            " -fx-end-margin: 0px;" +
            " -fx-padding: 0px;");

    menuOptions.getItems().add(menuOptionsChild);
    list.forEach((children) -> menuOptionsChild.getItems().add(new MenuItem(children)));

    MenuBar menuBar = new MenuBar();
    menuBar.setStyle("-fx-background-color: #bf6dbf;");
    menuBar.getMenus().addAll(menuOptions);
    VBox menuBarPane = new VBox(menuBar);
    masterPane.getChildren().add(menuBarPane);
}

and the output is as follows:

Answer 1

Here is a link to the root CSS file used with scene builder: modena.css

Take a look at the menu, menu bar, and menu item section. If I understand what you want the following two styles will remove the white space in the context menu.

.context-menu { 
-fx-padding: 0; }

.menu-item {
-fx-padding: 0; }

There is also a left and right container in that particular menu item. The left container has the text displayed and the right container has the arrow in it. To get the effect you want, you need to make sure you are applying it to the correct node in the modena.css file.