Hi all. The basic layout of the mobile app is:
The html layout:
<div id="title">Title</div>
<div id="tabs">Some tabs</div>
<div id="container" x-blackberry-focusable="true">
<div id="contents" style="width: "1000px;" height: "1000px;">
<div x-blackberry-focusable="true" onmouseover="highlight(this)" onmouseout="noHighlight(this)">I am some content">
.
.
.
<div x-blackberry-focusable="true" onmouseover="highlight(this)" onmouseout="noHighlight(this)">I am some content">
</div>
</div>
The css code:
#title
{
height: 50px;
}
#tabs
{
height: 40px;
}
#container
{
overflow: auto;
}
I set the width and height of the <body> using jQuery to detect the width and height of the mobile screen so it fits different version of BlackBerry phone. jQuery is also used to detect width for div#title, div#tabs and div#container.Finally the height of div#container is calculated by subtracting the screen height with div#title and div#tabs height.
The contents inside div#container will always be bigger than the div#container height or width. For example on Torch 9800 the screen is 360x480 div#container would be 360x390 then anything inside would be bigger than div#container.
Even though I set div#container overflow: auto, when I use trackpad or trackball to scroll the contents inside div#container, it will never get past the div#container width or height even though the inner container is bigger than div#container.
Can anyone please help me. I have stuck for weeks and really at lost.
Thank you.
