Sizing and alignment of MenuItem and icon graphic JavaFX

user_9278333 0
Viewed 402

I have a right click menu here and as you can see it shows up nicely:

enter image description here

When I try to add a right click menu to another table, it shows up like this:

enter image description here

Can I re-align the graphic or can I force the MenuItems to be the right size?

Here is the code (I add it to both tables the same way):

ContextMenu contextMenu = new ContextMenu(TableCommons.getAttendanceMenuItem(30),
                                          TableCommons.getAttendanceMenuItem(10),
                                          TableCommons.getAttendanceMenuItem(5));

this.table.setContextMenu(contextMenu);

import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIconView;

static MenuItem getAttendanceMenuItem(int number)
{
    MenuItem attendanceMenuItem = new MenuItem(number + " day Attendance");

    MaterialDesignIconView materialDesignIconView = new MaterialDesignIconView(MaterialDesignIcon.FILE_WORD_BOX);

    materialDesignIconView.setSize("1em");
    materialDesignIconView.setFill(Main.OFFICE_WORD_BLUE_COLOUR);
    attendanceMenuItem.setGraphic(materialDesignIconView);    

    return attendanceMenuItem;    

}
javafx-8 javafx java
1 Answers

I looked into this: it's due to padding which is set in the default JavaFX stylesheet, modena.css. The OP doesn't make their exact scenario clear, but I was running into the issue when trying to add a context menu to items in a dialog; the menu item graphics always had additional padding.

I'm not a CSS expert, but I think the offending lines of code from modena.css are the following:

.dialog-pane:no-header .graphic-container {
    -fx-padding: 0.833em 0 0 0.833em; /* 10px 0px 0px 10px */
}

I was able to fix it by adding the following to my own stylesheet, to override the default:

.menu-item > .graphic-container {
    -fx-padding: 0em 0.333em 0em 0em;
}
user_31001230
Related