MaterialCutOut on MaterialTableWidget not correct

[SandraK82]

I tried to make an CutOut on a Widget inside a Table (inside a Collapsible) and the CutOut did not appear. After Debugging I found that the CutOut had a wrong top value -800 something pixels. I fixed it by Overriding MaterialCutOut:setupCutOutPosition with an Addition:

private static native int top(Element element) /*-{ 
	return element.getBoundingClientRect().top;
}-*/;

private static native int left(Element element) /*-{ 
	return element.getBoundingClientRect().left;
}-*/;

protected void setupCutOutPosition(Element cutOut, Element relativeTo, int padding, boolean circle) {
        float top = relativeTo.getOffsetTop() - (Math.max($("html").scrollTop(), $("body").scrollTop()));
        float left = relativeTo.getAbsoluteLeft();

        float width = relativeTo.getOffsetWidth();
        float height = relativeTo.getOffsetHeight();

        if(left < 0 || top < 0) {
        	top = top(relativeTo);
        	left = left(relativeTo);
        }
        if (circle) {
…

Now it works as expected

[kevzlou7979]

Cool, can we convert the JSNI code to JSInterop

  private static native int top(Element element) /*-{ 
	return element.getBoundingClientRect().top;
  }-*/;

[SandraK82]

Somebody for sure… I dont have any JSInterop experience at all

[kevzlou7979]

I think what we can do is to use elemental2 will take a look on how we can support it as GWT 3 will not support JSNI.