Vaadin widget from Javascript component

Hi,

I am building a Vaadin widget from a Javascript Spreadsheet component using JSNI.

The javascript component has a method which uses document.documentElement.clientHeight and document.documentElement.scrollTop to identify the mouse position on a mousedown event and therefore highlight the correct cell on mouse click.
When the javascript component is used outside of Vaadin, it works correctly.

However, when the widget is used, I notice that the value for document.documentElement.scrollTop in the javascript method is always 0 even though the actual value should be greater. Therefore, once the application window is resized and vertical scrolling has been done, the correct cell is not highlighted on mouse click.

The javascript files have been integrated by overriding writeAjaxPageHtmlVaadinScripts.

What could be going wrong? Would appreciate any pointers in this regard.

Thanks,
Sindu

Attempting to explain the problem further with the help of an example.

I have a GWT composite widget consisting of a RichTextArea and a Button.


public class GwtScroll extends Composite {
    public GwtScroll() {

        final Button button1 = new Button();
        final RichTextArea rta = new RichTextArea(); 

        button1.addClickHandler(new ClickHandler(){
            @Override
            public void onClick(ClickEvent event) {
                rta.setText(rta.getText() + "\n" + getScrollInfo());
            }
        });
    }

    public native String getScrollInfo() /*-{
        return $wnd.getScrollInfo();
    }-*/;
}

The javascript function getScrollInfo() is as follows:


function getScrollInfo(){
    if (window.innerWidth) { // all but IE
        return ("window.pageYOffset = " + window.pageYOffset);
    } else {
        if (document.documentElement && document.documentElement.clientWidth) {
	return ("documentElement.scrollTop = " + document.documentElement.scrollTop);
        } else if (document.body.clientWidth) {
	return ("body.scrollTop = " + document.body.scrollTop);
        }
    }
}

When this GWT widget is used in a GWT application, it works as expected and returns the correct value on click of the button.

I now integrate the GWT widget in a Vaadin application by extending the GWT widget.


// the client side widget
public class VMyComponent extends GwtScroll implements Paintable

/**
 * Server side component for the VMyComponent widget.
 */
@com.vaadin.ui.ClientWidget(com.example.client.ui.VMyComponent.class)
public class MyComponent extends AbstractComponent {

The MyComponent widget is used in a Vaadin application. When the button is now clicked, the value returned from the getScrollInfo function is always zero.

Would appreciate any help in understanding why this is so.

Thanks,
Sindu

Not completely sure, but the problem might be that in Vaadin applications, by default, the main window scrollbars don’t apply to the body element, but to the .v-view element.

Thanks for the reply.
Is there a workaround to handle this?

You need a custom theme where you need to add some custom CSS:

html {
	height: auto;
	}

.v-generated-body {
	height: auto;
	overflow: auto;
	}

.v-app,
.v-view {
	height: auto;
	/* Force overflow value since Vaadin forces other overflow values for Safari */
	overflow: visible !important;
	}

That should be enough to make the body scroll, at least in most browsers. IE might need some other tweaks as well, not completely sure.

Thanks, Jouni