Hi all,
I have a Menubar with some Menuitems. In case the browser window is shrinked in a way thar horizontal scrolbars appear and we scroll to the right … opening the rightmost Menuitem positions the Submenuitems not directly under the menuitem but some centimeters left (see attached picture).
Is this a bug or is there a way to style this in some way.
Regards
Michael
Hi,
It certainly looks like a bug. The sub-menu drop-down list is handled as a floating overlay element, which is relative to the UI (v-ui) element. It’s possible that there is some misalignment in some case. Is it the browser window scrollbar or a scrollbar in some sub-element. Or is it an embedded UI by any chance?
I made a couple of quick tests with MenuBar, but couldn’t replicate it, so it’s perhaps some special circumstance. Which browser are you using? Which Vaadin version? If you don’t find the problem otherwise, it would be good if you could provide us with a minimal UI code that replicates the problem. I didn’t notice a related ticket, so if this does not turn out to be a problem in your layout, you could
create one
, perhaps with a summary such as: “MenuBar sub-menu overlay misaligned when scrolling horizontally” (or something like that). But the code example would be really important.
Also, I must note that your use case looks odd. You rarely want horizontal scrollbar in a browser window, especially one that requires scrolling to access some menu items. Horizontal scrolling is almost always “don’t-do-it”, except perhaps to display a wide table or some graphical content. In such case, you should limit the scrolling to some part of the layout, not the entire UI. In Vaadin terms, a MenuBar is typically 100% wide inside a VerticalLayout, which is the content layout for the UI class, and also has 100% width.
Definitely looks like your application layout is exceeding the browser window width. And overlay elements try to stay inside the browser frame, but when you overflow the content improperly, they still think the app is just 100% wide, and stay inside that area.
So you should try to make your UI fit inside the browser frame or handle the overflow by using some Vaadin component, such as Panel.
I have the same issue with Vaadin 7.1.11 but with vertical scroll.
When I have to scroll vertically to see a layout with a MenuBar, when I click into MenuBar, the items doesn’t appear under MenuBar clicked; they appear up in screen even out of the visible scrolled view.
Any ideas?