Solution: Using CSS height 100% causes reduction in visibility of page content in WebWorks applications

by Retired on ‎11-05-2012 04:39 PM (7,519 Views)

Symptoms

Applies to:

  • BlackBerry® Device Software version 6 and 7.

 

Page content rendered within a BlackBerry® WebWorks™ application does not stretch to 100% of the screen height as expected if CSS is used to specify a page height of 100%.

Diagnosis

The embedded WebView (named BrowserField) used within a compiled BlackBerry WebWorks application does not automatically grow in height if the page height is specified as 100% using CSS. As a result, if you specify height:100%, then the content may only be rendered in a small region at the top of the screen.

Solution

Use fixed position units to specify heights in a BrowserField (i.e. WebWorks apps created for BlackBerry Device Software version 6 and 7):

 

1) Using CSS 

 

body {
   height: 480px;
}

 

2) Using JavaScript®

 

document.addEventListener("load", function(e) {
   document.body.style.height = window.innerHeight + 'px';
});