Sticky Header, Navigation. Wrong absolute positioning of menu; overlays

I have a header navigation that is made sticky (fixed position set on page scroll)
My popup menu scrolls off the page when the nav menu is clicked and page is scrolled. I assume this happens because Vaddin puts all popup type overlays in a seperate overlay div.

Without any other hackery, how can I make the menu popup stay with element clicked?

It would be nice if Vaadin actually put the overlays in the wrapping div of the element click. That way without all this js repositioning, it can use simple css to keep its position.

I’m willing to bet you need hackery to get it to work as you want :frowning:

Is the the BODY element or the .v-ui element which is scrolling in your application? This affects how the coordinates for the overlay element are computed, if I recall correctly.

You might be able to set the menu popup as position:fixed as well, and have it positioned in the correct place and not scroll with the page then.

I think so too, but in reality it might not be really possible, since CSS can then clip those elements in some cases, when any parent element has position: relative/absolute; and overflow: hidden. It would be too easy to break applications with custom CSS if the overlay elements worked like this.

To be honest, I have been doing a lot of hacking and understand what comes along with it.
My goal was to simply use twitter bootstrap (make a truely responsive layout) without vaadin messing with all my stuff. it all started with removing the v-scrollable from the main contianing div :slight_smile: Personally I do not like all the 100% heights/widths, javascript resizing etc. not to mention scrollbars scrollbars scrollbars… so I digress :slight_smile:

I think what I am looking for is an alternative option to the GWT/Vaadin Overlay div/PopupPanel. Overlays are all assigned to a containing overlay div and not actually tied physically as a child to an element or parent element. So if my body now scrolls, so does everything else. I see there is an Overlay add-on but that is only compatible with Vaadin 6.

You can also see in the new Valo theme (I do commend you for your work) if you do a popup like the combo box, the popup is fixed regardless of scroll and can also be pushed of screen when you resize the browser.