The initial structure of the mobile application consists of:
The basic HTML layout is as follows:
<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 styling is set up as follows:
#title
{
height: 50px;
}
#tabs
{
height: 40px;
}
#container
{
overflow: auto;
}
To ensure responsiveness, jQuery is used to dynamically adjust the width and height of elements based on the user's screen size. For example, the width and height of div#container are calculated relative to the device's dimensions. Specifically, the height of div#container is determined by subtracting the heights of div#title and div#tabs from the screen height.
It is important to note that the contents within div#container are designed to exceed the container's dimensions. This means that on devices like the Torch 9800 (with a screen size of 360x480), the inner contents will be larger than the div#container itself, which measures 360x390.
Despite setting overflow: auto for div#container, scrolling using the trackpad or trackball will not allow the contents to extend beyond the specified width and height of the container. This issue has been causing challenges for several weeks now.
If anyone can offer guidance or assistance with this problem, it would be greatly appreciated. Thank you.