Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app
I'm working on a HTML5 game an I'd like to only use the 1024x600 landscape screen estate.
But currently when I launch my application on the real PlayBook, I see the viewport is creating a 1024x1024px viewport, that allows users to scroll down to the 'white'* space below my 600px.
*currently colored nice cyan-pastel.
Additionally pulling the screen further up or down reveals grey padding bars, (which spring back/away when stop touching the screen.)
How do I ensure that users are not able to scroll and avoid any ugly grey bands to be displayed with the vertical scrolling ?
I done a lot of search through the forums and fixed the viewport (even tried to specify 600px for the height)
limited my content and specified small divs, but the html and body still get sized 1024px height. (eventhough webinspector gives back 600px for html and body height. only when looking deep with web inspector I see that the client-height is set to 1024px.)
I could really use some help and example if possible to fix this issue, because it is stopping my further development as it would lead to unacceptable user experience.
I tried the following index.html
<!DOCTYPE html> <html> <head> <!-- meta http-equiv="Content-Type" content="text/html; charset=UTF-8" --> <!-- meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,maximum-scale=1. 0;" / --> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1 initial-scale=1.0, user-scalable=no, maximum-scale=1.0, height=device-height, width=device-width" name="viewport" id="viewport" /> <style> body,html { border: 0; margin: 0; padding: 0; outline: 0; font-size: 100%; background-color: #9CC; overflow:hidden; } div { border: 0; margin: 0; padding: 0; outline: 0; font-size: 100%; height: 600px; background-color:#FC9; overflow:hidden; } </style> </head> <body> <div> <center>Test</center> </div> </body> </html>
with the following config.xml:
<?xml version="1.0" encoding="utf-8"?> <widget xmlns=" http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="2.0.0.0"> <name>TabletTest</name> <description> Test file for screen </description> <author href="http://www.arche-it.nl/" rim:copyright="Copyright 1998-2011 Arche IT bv">Arche IT bv</author> <authorId>gYAAgLk_o96nHmJYXV5JkZWLoQk</authorId> <rim:orientation mode="landscape"/> <content src="index.html"/> </widget>
And the following tablet-config.xml
<qnx>
<author>Arche IT bv</author>
<authorId>myid</authorId>
<platformVersion>1.0.0.0</platformVersion>
</qnx>
Grey band when down pulling the WebWorks app:
The actual 600px height div:
Scrolling possible (going down) (1024px) - see scrollbar.
And the grey Band from scrolling to far down:
Checking with Web inspector straight on the PlayBook, the client height is actually showing 1024 px !!
element.style {
}
Matched CSS Rules
body, html {
background-color: #9CC;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
overflow: hidden;
padding: 0px;
}
user agent stylesheet
html {
display: block;
}
Metrics
position‒
‒margin‒
‒border‒
‒padding‒
‒1024 × 600‒
‒‒
‒‒
‒‒
‒
Properties
Prototype
HTMLHtmlElement
attributes: NamedNodeMap
baseURI: "local:///index.html"
childElementCount: 2
childNodes: NodeList[3]
children: HTMLCollection[2]
classList: DOMTokenList
className: ""
clientHeight: 1024
clientLeft: 0
clientTop: 0
clientWidth: 1024
constructor: HTMLHtmlElementConstructor
contentEditable: "false"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: HTMLHeadElement
firstElementChild: HTMLHeadElement
hidden: false
id: ""
innerHTML: "<head> <!-- meta http-equiv="Content-Type" content="text/html; charset=UTF-8" --> <!-- meta name="vi…"
innerText: "Test"
isContentEditable: false
lang: ""
lastChild: HTMLBodyElement
lastElementChild: HTMLBodyElement
localName: "html"
manifest: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "HTML"
nodeType: 1
nodeValue: null
offsetHeight: 600
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 1024
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
ontouchcancel: null
ontouchend: null
ontouchmove: null
ontouchstart: null
outerHTML: "<html><head> <!-- meta http-equiv="Content-Type" content="text/html; charset=UTF-8" --> <!-- meta na…"
outerText: "Test"
ownerDocument: HTMLDocument
parentElement: null
parentNode: HTMLDocument
prefix: null
previousElementSibling: null
previousSibling: DocumentType
scrollHeight: 600
scrollLeft: 0
scrollTop: 0
scrollWidth: 1024
style: CSSStyleDeclaration
tabIndex: -1
tagName: "HTML"
textContent: " body,html { border: 0; margin: 0; padding: 0; outline: 0; font-size: 100%; ba…"
title: ""
version: ""
__proto__: HTMLHtmlElementPrototype
. The height was removed to achieve what you were looking for.
