gluon mobile: menus in menu are flickering

Question

Hello community of stackoverflow ...

I've put multiple (JavaFX) Menu -instances into one Menu (which is in a subnode of a GluonMobile-View):

The problem is, that the submenus are flickering and overlapping each other when the courser hovers one of them:

So my question is, if someone knows a solution for my problem. (The view was build with SceneBuilder)

Answer 1

For starters, classic desktop menus are not really intended to be used in mobile applications.

You should consider different approaches, like the NavigationDrawer ( javadoc ), or the BottomNavigation control ( javadoc ).

Anyway, if you really need to use them, here is an explanation of the issue you are facing:

On Scene Builder, when you add MenuBar , it includes by default some Menu and MenuItem controls. If you enable the Gluon Mobile theme:

you will notice that the padding on the Menu is minimal, while the MenuItem has bigger padding and a minimum height and width have been set.

If you add a Menu as child of another Menu , if this menu is not selected or focused, it is styled like a MenuItem , but if you focus it, it will be styled as a Menu , forcing a relayout.

For instance, in this pic, Edit on top is the select menu, while Edit on bottom is not selected.

Right after the layout, if the mouse cursor was close enough to the next item, it is possible that now is selecting it, which will expand it. At the same time the former selected menu will become deselected, and it will grow again...

Here is an easy way to solve the issue: In your css file for the view, add something like:

.menu,
.menu:focused,
.menu-item {
    -fx-padding: 10;
}

so both menus and menu-items have same padding in all cases, preventing any possible flickering.

Note that with css you can override any previous existing styling and modify it to your liking.