BrowserFrame scrolling in Vaadin Touchkit app not working on iOS Devices

Vaadin 6 / 7 / 8 Framework UI
1

I am building a mobile app using Vaadin Touchkit 3.0

I have a BrowserFrame which displays a long HTML content in one of my view classes. The scrolling for BrowserFrame works well on android devices but is not working on iOS devices. Below is the piece of code I have used:

FormLayout layout = new FormLayout();
BrowserFrame preview = new BrowserFrame();
preview.setSizeFull();
Resource documentResource = new FileResource(new File(outputFile.getAbsolutePath()));
preview.setSource(documentResource);
layout.addComponent(preview);
setContent(layout);

Can anyone help me on this?

Thanks,
Nikhil

2

I got the scrolling working.
I used Label with ContentMode as HTML instead of BrowserFrame to display the HTML. Also, had to ensure that the layout in which Label was added has undefined size.

3

Is there any solution to this? Maybe a css-style that is needed for Safari Browser in order to recognize this BrowserFrame as being able to scroll?

This is my code, pretty straight forward & good working on any android device and, of course, a desktop browser:

[code]
CssLayout layout = new CssLayout();
layout.setSizeFull();

BrowserFrame browser = new BrowserFrame();
browser.setSizeFull();
layout.addComponent(browser);

browser.setSource(new ExternalResource(“http://verylongpage.com”));
[/code]Anybody any ideas?

4

Hello flowfact,

I tried using the Verge’s site, and the scrollbars appear as expected in Safari and Firefox (desktop). Although scrolling works in Safari, the scrollbar doesn’t move.

On what platform, and which Vaadin version did your problem occur? Would you mind filing a ticket at dev.vaadin.com?

5

Yes, for Desktop it is not a problem - only when using iOS devices. Even for android mobile devices everything is fine.

I submitted a bug report: http://dev.vaadin.com/ticket/14813#ticket

Will add some code later today to demonstrate.

6

Thank you very much! :slight_smile:

7

So, I also added a pretty straight forward test class. As I wrote in the ticket: Issue can only be seen when using an iOS device.