Search code examples
javafxfxmljavafx-css

Remove arrow on JavaFX menuButton

Hi JavaFX Stylesheet expert,

How do I remove the default arrow on JavaFX menuButton.

I have figured how to change the color and make in unvisible with 

.menu-button {
    -fx-mark-color: transparent;
}

or 

.menu-button .arrow {
    -fx-background-color: transparent;
}

but, I don't want the gap because of the unvisible arrow.

Thanks for your advice.

Best Regards,

Ivan

Solution

  • If we look into the source code of MenuButtonSkinBase, the sub structure of MenuButton seems to be

    MenuButton
   |——— label (LabeledImpl)
   |——— arrowButton (StackPane)
            |——— arrow (StackPane)

    So to hide the "arrow" it is enough to set padding to 0 for both StackPanes:

    .menu-button > .arrow-button {
    -fx-padding: 0;
}

.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}