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

Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha
Accepted Solution

Scroll Panel height

I have been playing around with the Scroll Panel for bbUI.js and it looks like when the height is set to 100% the scrollTo() function does not work. You have to specify the exact height.


Can anyone help me how to calculate this for the Z10 and Q10? My HTML looks like this:

<div data-bb-type="round-panel>
<div data-bb-type="scroll-panel" style="height: ???px">
<div data-bb-type="item" data-bb-img="1.png" data-bb-title="1"></div>
<div data-bb-type="item" data-bb-img="2.png" data-bb-title="2"></div>
<div data-bb-type="item" data-bb-img="3.png" data-bb-title="3"></div>
<div data-bb-type="item" data-bb-img="4.png" data-bb-title="4"></div>

<div data-bb-type="item" data-bb-img="5.png" data-bb-title="5"></div>
<div data-bb-type="item" data-bb-img="6.png" data-bb-title="6"></div>
<div data-bb-type="item" data-bb-img="7.png" data-bb-title="7"></div>
<div data-bb-type="item" data-bb-img="8.png" data-bb-title="8"></div>


And I have a standard bottom menu bar with overflow.

Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Scroll Panel height

From the Scroll Panel wiki page:


A scrolling panel is a <div> with a data-bb-type="scroll-panel" attribute. NOTE: In order for content to scroll in the panel, it must have a specified height. Otherwise the panel will grow to the size of its inner content



So you must use a specific height, not 100%.


I'd recommend a height of 720 - (height of menu bar at bottom) ? 



Follow me on Twitter: @n_adam_stanley
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Posts: 101
Registered: ‎03-02-2013
My Device: Dev Alpha

Re: Scroll Panel height

Just got my app denied because of this issue. Smiley Happy


"720 - (height of menu bar at bottom)" is not enough for the Z10. Only half of the list shows up.


My advice is to use 100% on the Z10, because there you don't need the "T" and "B" buttons for top and bottom actions.

For the Q10 560px worked out for me.

Posts: 59
Registered: ‎05-06-2012
My Device: Blackberry torch 9850
My Carrier: Voila

Re: Scroll Panel height

[ Edited ]

For a more efficient way of solving this issue, you can:
1) wrap the scroll panel in a div, and specify its height in percent. Then, set scroll height after with javascript.
<div style='height:100%;'>
<div id='mypanel' data-bb-type="scroll-panel">
var myPanel= document.getElementById("mypanel");
myPanel.css.height= (myPanel.parentElement.innerHeight-1)+"px";

2) Or simply, set the css height for your panel property using "calc(x)" method:
<div data-bb-type="scroll-panel" style="height:calc(100% - 1px)">
Find more about "calc(..)" here:

NB: For some reason, the above solutions will work only and if only you modify the percent
value. That's why I've always subtracted by "-1" (pixel).
Don't forget to like if I've helped :-),
Monero J.