How do I make sure Widgets receive mouse events if placed in front of a Canvas or Vaadin DrawingArea?

[Navigateur]

This used to work on Firefox in GWT 2.3 on Window XP, but now on Chrome and IE with GWT 2.4 and Windows Vista I can't make my Widgets, which are in front of a Canvas (or Vaadin DrawingArea), receive any mouse events at all.

A widget is placed in front of the drawing surface like so:

absolutePanel.add(canvas); //drawing surface, whether it's a Canvas or Vaadin DrawingArea

absolutePanel.setWidgetPosition(canvas, 0, 0);

absolutePanel.add(myWidget);

absolutePanel.setWidgetPosition(myWidget, 0, 0);

If I do not add the "canvas", "myWidget" receives its mouse events fine.

How do I make sure "myWidget" can receive all its mouse events properly in this scenario?

[Ashwin Desikan]

Use z-index CSS property to set the depth of your widgets. Higher z-index would get priority 

Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/oxkWAvKVuG0J.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Navigateur]

I tried this but unfortunately to no avail!

I did it as follows:

canvas.addStyleName("behind");

absolutePanel.add(canvas); //drawing surface, whether it's a Canvas or Vaadin DrawingArea

absolutePanel.setWidgetPosition(canvas, 0, 0);

myWidget.addStyleName("inFront");

absolutePanel.add(myWidget);

absolutePanel.setWidgetPosition(myWidget, 0, 0);

..where CSS file says:

.behind{

    z-index:-1;

}

.inFront{

    z-index:1;

}

Problem remains even if I change z-indexes to, say, 1 and 4, respectively, or -100 and 100. So the z-indexing was probably not the cause of the Widgets not getting the mouse events. Any ideas of how I'd make sure they do? Are you able to get this to work?

On Friday, July 13, 2012 3:06:19 PM UTC+1, Ashwin Desikan wrote:

Use z-index CSS property to set the depth of your widgets. Higher z-index would get priority 

Sent from my iPhone

[ashwin....@gmail.com]

i have a similar implementation for my project. I have a panel to which I add a canvas (first) and dynamically I add multiple widgets. 

I actually don't use z-index ( so i am wrong with my previous comment). All that I do is I add the canvas before any of my other widgets. I have enabled domEvents on my widget and capture mouse/ key-board events.

seems to work just fine. Use DevTool (like in chrome) to check how the widgets are getting rendered. I use absolute positioning on my widgets.

~ashwin

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/f9Hl9DzQ6QMJ.