Overlays - Yet another new fancy add-on component

Flow
21

fwiw, i’ve figured most of this out. Putting the overlay on the parent of the tabsheet rather than the tabsheet itself seems to work – the sizing of the tabsheet remains mangled, but the overlay ends up in the right place.

I’m able to fix the sizing of the tabsheet via a css layout, but I have not yet discovered the trick for the overall sizing of the application.

You might want to try the overlays with a tabsheet to see if you can reproduce. The general configuration of the UI where I was seeing this behavior

Window

  • Split Pane
    • Panel (top of split pane w/ horizontal layout)
    • Panel (Bottom of split pane) ← overlay here works, but only when this uses csslayout
      • Tabsheet ← putting overlay here ended up w/ incorrect positioning
22

Thanks for these details! I’ll test with the scenario above to find out what is causing this.

23

I ended up fixing the global application sizing issue by removing the styles.css from the overlays widget and removing all app level (v-app, v-view, v-generated-body, etc) css elements from my own theme.

I don’t know if it was some odd interations in the css or just the settings in general, but leaving it to the Vaadin defaults seems to get the expected behavior.

24

I noticed if I put the overlay in the bottom right of the component, and then make the window larger, it doesnt move along with the component it’s on top of, it stays at the same absolute x/y that it was at originally. Similarly, if the window is resized smaller, it does not move with the window, it just ends up out of view.

I thought I had seen somewhere that the CSS in overlays had something to do w/ scrolling. Perhaps this is a side-effect of having removed the CSS, or is this a bug?

25

Hi again,

I tested with the application setup you described and I was able to repeat the problem. It seems that adding code like:

VerticalLayout vl = (VerticalLayout) mainWindow.getContent(); vl.setSizeFull(); breaks the rendering altogether resulting a blank page. (Actually I don’t know if you have do something like this, but because you are using a SplitPanel I guess you have.)

I created a package (0.9.7) without CSS, but the there seems to be multiple problems with SplitPanel-Overlay combination: This “non-CSS” version seems to work as long as you don’t try to position an overlay aligned inside or below the SplitPanel. Then it seems to fail again resulting an overlay in top-left corner of window. I need more time to debug this, so better check later again.

What you described about the window resizing not affecting the overlay positioning: That is a limitation for now and you can notice that in the demo too.

I could not find a way in Vaadin to trigger the position recalculations on resize. Page reload helps, but that’s not actually any solution… Maybe someone knows better about installing listeners in layouts/components for resize events?

26

I’m glad to were able to reproduce my original error.

Re: the resizing. It looks like updateOverlayPosition handles the positioning of the overlay, this is called from updateFromUIDL (deferred, but same difference). So server side events that fire a repaint should reposition the overlay, right?

I tried adding a listener for when the parent component is attached to the window and then adding a window listener to the main window to catch resize events, then I set the offset to force a client side update, which I thought should reposition the overlay.

For some reason, i don’t get any resize events at all. i’m looking into this – we used to get resize events before we upgraded vaadin – if it seems to work the same approach should work if included in CustomOverlay rather than in my custom component and I’ll send along the code.

27

K, so I added this code to CustomOverlay, and it seems to resize properly now, you might want to try this out. You’ll probably need to set the main window of the application to immedate, I had to do that to get the resize events.

it still behaves badly on scrolls, you get a nasty visual artifact of the overlay drawn multiple times as the window scrolls. I managed this by moving the overlay outside of the scrollable area, but I may poke around and see if there’s anything that can be done with this. If you have any thoughts on fixing that, I’m open to suggestions.

	/**
	 * @inheritDoc
	 */
	@Override
	public void attach() {
		super.attach();

		if (getApplication() != null && getApplication().getMainWindow() != null) {
			getApplication().getMainWindow().addListener(new Window.ResizeListener() {
				public void windowResized(final Window.ResizeEvent theResizeEvent) {
					requestRepaint();
				}
			});
		}
		else {
			ApplicationConnection.getConsole().log("Failed to attach resize listener");
		}
	}
28

I did just test the 0.9.7 version and now at least it no longer breaks the layout of the app. (0px heights)
But I place the components in a scrollable area, and when I scroll this, then the overlays don’t scroll with the content.

Is this a know bug or should I try to make a testcase for you ?

André

29

I would categorize this as a known issue. I’ve been trying to find out the best way of tracking scroll events, but currently there are only partial workarounds. I’ll implement something for the next version to overcome this, but I expect it not to be the final solution. An additional test case would not hurt, though.

30

I’ve also noticed that when the component containing the overlay is removed from the container it’s in, the overlay does not seem to be removed.

I tried putting in some debugging and explicitly removing the overlay, but it doesn’t seem to affect anything, it’s still always visible even after its parent is detached.

Has anyone else seen this?

31

Yes,

I also see this behaviour.

32

Hello,
I’m also stuck at the “remove overlay” problem. Is there a workaround for it?

Best regards,
Dinko

33

Hi,

This is a known problem that haven’t been solved yet. The default way of hiding does not reflect the changes to the browser. If you reload the page it disappears. I’ll try to fix this asap.

34

Ok, I updated the Overlays add-on to version 0.9.8. Get it at
vaadin.com/addon/overlays
. Also slightly updated the demo to add sample with fade animations.

This version fixes the removeComponent problem as well as visibility toggling. There still are problems in certain kind of applications with scrolling, but I extracted the needed to fix this CSS as a sample code at the add-on info page.

35

I can’t get this to work. My general layout is:

Window
  Panel
    Tab
      Accordion
        Form

I would like to add overlays on the form fields inside the accordion for help text. I’ve tried adding the overlay to the main window but it just shows up at the top of the browser window instead of in the correct location.

I can’t seem to find a good elegant workable way to show help text for form fields in Vaadin. I would like to place a question mark icon next to the field and show the help on hover or click.

Cheers,
Raman

36

Hi,

On what browser is this happening? Positioning is made according to the reference component, but you might try to add the overlay itself somewhere else to see if that helps. I mean like something directly to window or the panel.

If it happens to work, please let us know and we can try to find a fix for that.

37

Have you checked out the ContextHelp add-on (search from the Directory)? I think it is specifically designed for this purpose.

38

Hi,

I like the overlay component, but it won’t work properly for me. I’ve attached it to the top right of a form, but if I resize my page and then scroll from left to right, the overlay won’t stay attached at the top right of the form now, and will stay where it was originally positioned before resizing the browser window.

If that doesn’t seem clear, please let me know.

Thanks,

Mark

39

Yeah. 1) I can’t get ContextHelp to work due to the client widgetset not found (even the new 0.0.4 version with fixed packaging), and 2) even if I do get it working, I believe ContextHelp requires the user to hit F1 – so I still need some sort of visual indicator such as a help button for the user to display on the form that, when clicked, will open up the context help. My intention was to use the overlay component for this, but overlay isn’t working either (the client widgetset works fine, but it doesn’t position anything correctly). So I can find no easy way to do this.

Cheers,
Raman

40

The scrolling issue is real. There is currently no generic tracking of scrolling events to reposition the Overlays. I have an idea for a workaround, but that would not be complete solution either. However, I’ll let you know when this is added.