Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL
Accepted Solution

Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

[ Edited ]

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:

IMG_00000038.jpg

 IMG_00000038.jpg

 

The actual 600px height div:

IMG_00000037.jpg

IMG_00000037.jpg

 

Scrolling possible (going down) (1024px) - see scrollbar.

IMG_00000039.jpg

 

IMG_00000039.jpg

And the grey Band from scrolling to far down:

IMG_00000040.jpg 

 

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

 

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

If you're using the PB's browser, I think there is little you can do, if you've built the app using Webworks, try this:

<meta name="viewport" id="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;" />

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Hello InterfaSys,

 

Thanks for your reply.

 

If it worked for you, I'd be more then happy if you have an example I could try out.

 

I've updated my post with further tests (and firther research through the forums), but I'm unable to succesfully reproduce what others might be reporting. (as I don't see any final examples).

 

many thanks in advance.

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Developer
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Hi,

 

Below is the sample code I used in a page

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- The new doctype -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
	<title>Test</title>
</head>
<body>
	<div>
	<center>Test</center>
	</div> 
</body>
</html>

 

This doesn't cause any scrolling effect. If the content height is more than height of the playbook screen it will surely cause scrolling. Inorder to prevent this you will have use javascript to set inner body height dynamically by calculating the height using window.innerHeight on document onload.

 

Also the code

 

<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />

 is to prevent the user from zooming in by double tapping.

 

 

Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Hello Praveen_rajan, many thanks for your help,  thanks to your example I did sort it out now and I can continue on my path to Developer glory ;-):

 

It seems specifying this parameter:

<meta name="viewport" content="initial-scale=1.0,user-scalable=no, maximim-sclae=1.0, height=device-height, width=device-width" />

 

Achieved the opposite what I wanted and actually made the height go to 1024px. Specifying it as 600px din't resolve any of those issues. I 've followed your advice to only use:

 

<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />

 

And now it's working as I want.

 

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

I guess I should have been clearer in my quick fix Smiley Wink. The height was removed to achieve what you were looking for.

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

No worries,

 

With hind-sight I understood you also gave the right answer (and also the other entries in the forums), but I'd looked over the part where the height=device-height part was left out in all the other answers.

 

I just followed the documentation and hope the height parameter would actually solve the issue ;-).

 

I gave you some kudo for your help too.

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

Thanks Smiley Happy

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
Posts: 47
Registered: ‎02-18-2011
My Device: Not Specified

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

reumerd,

 

would you be so kind to either post and email me the code you used to get this to work?

 

I am having a hard time figureing this out.

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Disable scrolling (and the grey bands) on BlackBerry PlayBook WebWorks app

[ Edited ]

Hello bbthemelab,

 

Just saw your tweet to @BlackBerryDev, guess I'm a little late to the game here. Glad to see you managed to get it resolved though!

 

EDIT: Whoops, meant to respond here.

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Fixed-background/m-p/1553939/hig...

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.