AbsoluteLayout with image and empty clickable layouts doesn't work in ie

Hallo,

i have the following problem:

I want to place clickable areas at a image. Therefore i decided to use a absolute layout. The layout contains an image (the backgroundimage) and some clickable vertical layouts, which are at the correct position at the picture.

The example works fine in firefox and chrome but not in ie10, ie8. I develop with vaadin 7.1.3. . I found out when the clickable layouts has some content, the layouts are clickable in ie too (but only on the content, eg. if use some text like foobar, only clickable at foobar).

Is this a bug and knows anybody a workarround or a better solution?


package de.test;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.event.LayoutEvents.LayoutClickEvent;
import com.vaadin.event.LayoutEvents.LayoutClickListener;
import com.vaadin.server.ThemeResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Image;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
@SuppressWarnings("serial")
public class MyVaadinUI extends UI {

  @WebServlet(value = "/*", asyncSupported = true)
  @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "de.test.AppWidgetSet")
  public static class Servlet extends VaadinServlet {
  }

  @Override
  protected void init(final VaadinRequest request) {
    setSizeFull();
    final VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    layout.setMargin(true);
    setContent(layout);

    final AbsoluteLayout absoluteLayout = new AbsoluteLayout();
    absoluteLayout.addComponent(new Image(null, new ThemeResource("test.png")));
    final VerticalLayout layout2 = new VerticalLayout();
    final VerticalLayout layout3 = new VerticalLayout();
    layout2.addStyleName("border");
    layout3.addStyleName("border");
    layout2.setHeight("100px");
    layout2.setWidth("100px");

    layout3.setHeight("200px");
    layout3.setWidth("100px");

    absoluteLayout.addComponent(layout2, "top:100px; left: 100px;");
    absoluteLayout.addComponent(layout3, "top:200px; left: 200px;");

    layout2.addLayoutClickListener(new LayoutClickListener() {

      @Override
      public void layoutClick(final LayoutClickEvent event) {
        UI.getCurrent().addWindow(new Window("ClickTest", new Label("Foo")));
      }
    });
    layout3.addLayoutClickListener(new LayoutClickListener() {

      @Override
      public void layoutClick(final LayoutClickEvent event) {
        UI.getCurrent().addWindow(new Window("ClickTest", new Label("Foo")));
      }
    });

    layout.addComponent(absoluteLayout);
  }

}

The javadoc of LayoutClickNotifier states that click events should be created when clicking on a component inside the layout, but the method javadoc for addLayoutClickListener(…) also mentions clicking on the layout itself. If either does not work, this sounds like a bug (not behaving as specified).

Please
create a ticket
about this.