Web and WebWorks Development

[callumcarolan]

I'm currently developing an app using HTML and as others have pointed out there is a rather annoying scrolling problem when you open the keyboard however nowhere says how to fix it. If I can check when the keyboard has been opened/closed I'd be able to modify the height of the page to prevent any scrolling however there's no way I can do that from reading the documentation. I have the usual non-scrolling hacks to stop the page scrolling normally but it still seems to mess up when you open the keyboard.

Any solutions?

[crwblyth]

I have the same issue, I tried to find help before, but seems to be rare around here...    

[astanley]

Sorry I'm not aware of any way to check to see if the Tablet OS virtual keyboard is open.  

Looking at the Tablet OS API reference guide, I don't see a "keyboard opened" event, so a custom AIR extension is out of the question.

I don't believe this is currently possible.

[crwblyth]

The main issue is that when the keyboard is open and all scrolling is disabled, the background and other items (divs etc.) become scrollable. 

Pretty huge bug within the webworks framework!

[callumcarolan]

This is certainly something that needs to be addressed as keyboard control is a rather important feature. I'd at least like a way to fix the scrolling of WebWorks apps when the keyboard is open though.

[astanley]

Agreed that sounds like an important issue.  Can you help me reproduce this problem?

Would you please post a code sample that reproduces this problem, either as a response to this thread or (better) open a bug for this problem in github here: https://github.com/blackberry/WebWorks-TabletOS/issues

[callumcarolan]

Thank you, Crwblyth is working on reproducing it for you.

[crwblyth]

I'll provide you with a .bar file which has the problem available to see.

http://www.c2dev.org/issue.bar

This is an extremely rushed together .bar file which replicates the problem.

When it loads, try and scroll - nothing happens. 

Open the keyboard and try and scroll - the background image scrolls around.

The code put in place with intent to fix this is as follows:

<meta name="viewport" id="viewport" content="initial-scale=1.0,height=600,width=1024,user-scalable=no"/>

The above was placed under head in the html file.

The following attributes were set in the CSS for body:

overflow: hidden;
position: fixed;

Thanks,

Crwblyth 

[astanley]

Hello,

Using the sample provided, I can reproduce the behavior you have described.  However I can also reproduce this behavior if I extract the files, and access the index.html file using the browser. 

So this is not exclusively a WebWorks issue.

Note, if I add the following JavaScript to index.html, I can prevent the undesired scrolling behavior from occuring while the keyboard is open:

document.addEventListener("touchmove", function(e) { e.preventDefault(); }, false);

The e.preventDefault() instructs the browser engine to stop its default behavior for touch move events - in this case scrolling.  

Can you confirm if this is the behavior you are looking for?

Note the viewport META tag you have included will define the inital zoom level, and prevent the user from using pinch-to-zoom, but has no effect on scrolling.

The global CSS style applied to the body may produce the illusion that scrolling has been disabled, but it is better to use the above preventDefault() JavaScript to do this.

Thanks,

[crwblyth]

This doesn't work, problem still occurs.