Search code examples
javacssjavafx-2menuitemmenubar

Javafx menuitem white border

i'm trying to change the background color of my menubar and menuitems in Javafx via CSS. I already managed it to change the color of the menubar and the menu but there's a strange problem with the menuitems: After changing the background color, there's always a white border at the top and the bottom. This is my CSS Code:

.menu-bar {
  -fx-background-color: green;
}

.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
    -fx-background: -fx-accent;
    -fx-background-color: darkgreen;
    -fx-text-fill: -fx-selection-bar-text;
}

.menu-item {
  -fx-background-color: darkgreen;
}

And here's an image of the error: Image (Sorry, I am not able to post an image, because this is my first post and I've got too few reputation...)

I recognized that the border at the bottom becomes bigger(!) if I add these lines of code:

.menu-item {
  -fx-background-color: darkgreen;
  -fx-padding: 0em 0em 0em 0em;
}

So apparently it has something to do with the padding, but I don't really know what...

Solution

  • The popup appeared on click of Menu is a ContextMenu which has and shows MenuItems. Styling menu items is not enough, the parent/container of them is also should be styled:

    .context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: darkgreen;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
}

    P.S. The image you linked cannot be shown due to the authorization of that forum site.