vaadin
[menu-bar] Incorrect appearance when aligned to the right with CSS
The problem is in Vaadin version 14.4.7 (UPDATE: still effective in 14.8.17)
When the container of the MenuBar component is aligning its content to the right using for example the style display: flex; justify-content: flex-end; then opening the MenuBar causes it to briefly appear misaligned at first and to abruptly jump in position under the button a moment later. The same happens in reverse order when closing the menu.
The menu is functionally working, but the show/fade actions of the overlay are displayed incorrectly. Changing flex-end to flex-start solves the issue for me, but this way it is no longer possible to align menus to the right. Furthermore aligning to the right with other means results in the same behaviour: I tried having two divs side by side, the left one taking up all of the space with flex-grow: 1 pushing the right one to the right without using flex-end, but the result is the same.
Follows a snippet that can reproduce the visualization error, that can also be seen in the attached videoclip. The issue is more clearly seen when the menu is closed, but it is happening on menu opening as well.
https://user-images.githubusercontent.com/8984541/109273785-f16b0800-7812-11eb-9ab4-cd935c79317c.mp4
@Route("")
public class LayoutHeader extends HorizontalLayout {
private MenuBar menuRight = new MenuBar();
private MenuItem userMenu;
public LayoutHeader() {
build();
}
public void build() {
Div rightDiv = new Div();
rightDiv.getElement().getStyle().set("display", "flex");
rightDiv.getElement().getStyle().set("justify-content", "flex-end");
setFlexGrow(1, rightDiv);
add(rightDiv);
userMenu = menuRight.addItem(new Icon(VaadinIcon.USER));
rightDiv.add(menuRight);
populateMenu();
}
private void populateMenu() {
userMenu.getSubMenu().removeAll();
Div c = new Div();
Span span = new Span("Test");
c.add(span);
userMenu.getSubMenu().addItem(c);
}
}
A bigger issue is that setting justify-content: flex-end breaks menu item overflow on small screens. Same with setting direction:rtl
Closing as solved in V23.2 with a new theme variant: https://github.com/vaadin/web-components/pull/4038
@rolfsmeds the opening post describes Vaadin V14 being used: will it also be backported to V14?
I just tried with yesterday's version 14.8.17 but I'm still experiencing the same output, so it feels early to close this unless the merge is scheduled for next version, in which case a confirmation would be appreciated
No, only V23. This was not really a bug in the first place, since the component simply did not support right aligning, so the solution is a new feature, and new features are only shipped in the latest version by default. Backports are available as sponsored development, however.
Why is it not a bug? The example could be refactored using just HorizontalLayout API with width full and end-alignment and the result would be the same. The use-case is so widespread that I don't think you can consider it as a new feature. Each mobile website would be having a language menu aligned to the right. Heck, even the Vaadin homepage uses a menu aligned to the right once you login... I don't see it flickering though!
I could be wrong, but I suspect that the solution as you call it is probably some distraction mistake in the js calculations for the overlay creation position, just like issues #411 and #3222 were.
Is it possible to have this being looked at or am I destined to have absolute divs as menus?
Ah, apologies, mistook this for another issue in which flex properties on the MenuBar itself were tweaked to achieve right-alignment, causing the overflow functionality to fail.
Regardless, I am no longer able to reproduce the issue in V23 – the exact code snippet provided seems to behave correctly both in terms of regular dropdown menus and overflow behavior.
I'll reopen as a V14-only issue. (If someone can reproduce this in V23, let me know and I'll re-categorize accordingly.)
Be aware that we are also not backporting non-critical bugfixes to V14 anymore by default, but we'll have a look if this particular one would be easy to do, and if so, add it to the backlog for a V14 version.
The issue here is that menu bar is based on the context menu component, both of which contain (different) implementations for positioning the overlay. On open, first the context menu places the overlay, then the menu bar immediately moves it to the correct position, which can result in a slight flicker. On closing, the context menu changes the overlay position again, but the menu bar does not override it in this case, making the jump more noticable.
In 23 this was solved with replacing the custom positioning logic of both components with the position mixin: https://github.com/vaadin/web-components/pull/2917. A fix would involve back-porting that change to 14, which would be a larger effort.
