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
d_source
Posts: 116
Registered: ‎03-08-2011
My Device: Not Specified
Accepted Solution

Force scrollbars on Playbook app

In the app i'm making i have a <div> of a fixed height. User inputs make the list in the div longer and eventually it will go beyond the bottom border. In my CSS i have the overflow set to auto so that when the list is longer than the div the scrollbars will show. This works in all browsers but not on the playbook. The div is userscrollable but i'm afraid that the user won't know to scroll since the bars don't appear. I tried many different options and nothing makes the bars appear on the playbook. Anyone know what the trick is here?

Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Force scrollbars on Playbook app

Even I have the same issue. This is because the default scroll bar is present only for the whole HTML body and not for inner DIVs. Have you tried the iScroll Javascript library which has some cool scrolling effects. May be there are some settings to keep the scrollbars visible using that.
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Force scrollbars on Playbook app

One comment about using a JavaScript toolkit like iScroll or others.... using one of these toolkits will slow down the scrolling of the div since the toolkit animates the scroll using JavaScript and CSS.

 

The native scrolling of <div>'s and the body content is hardware accelerated and very smooth with inertial effects.

 

By adding a scrolling JavaScript toolkit you may get scroll bars drawn, but it could drastically reduce your scrolling speed and smoothness.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Force scrollbars on Playbook app

Yes I totally agree with that. But is there an alternative way for the issue mentioned?
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Force scrollbars on Playbook app

[ Edited ]

Unfortunately I don't think there is any way to force the scroll bars to appear on a div unless you draw in some fake ones.

 

Another thought would be to draw a "down" arrow in the div to indicate there's scrollable content.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
d_source
Posts: 116
Registered: ‎03-08-2011
My Device: Not Specified

Re: Force scrollbars on Playbook app

Thanks. It's good to know that this isn't possible and that I have to look for an alternate solution. It sucks that you can't force scroll bars to appear however.

 

My solution is to have a msg pop up when the div goes longer than the lower limit.

Please use plain text.
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Device: PlayBook
My Carrier: Rogers

Re: Force scrollbars on Playbook app

After tneil advised me to ditch iScroll and use the native kinetic scrolling built into WebWorks, I had a related issue to this - I had DIVs with overflow but no visible scrollbar. 

 

My solution: Adding a custom scrollbar for WebKit browsers as described here:

 

http://css-tricks.com/9130-custom-scrollbars-in-webkit/

 

My specific implementation is encapsulated in this GitHub commit:

 

https://github.com/yllus/Lemma-for-the-BlackBerry-PlayBook/commit/cace1d022a544b8c7a9546d5044d42d489...

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Force scrollbars on Playbook app

Very cool... the webkit CSS styling of scroll bars is news to me :smileyhappy:

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Force scrollbars on Playbook app

This is great news, thanks  :smileyhappy:

Please use plain text.
Developer
d_source
Posts: 116
Registered: ‎03-08-2011
My Device: Not Specified

Re: Force scrollbars on Playbook app

Thank you very much! This is excellent and it works! There are so many new and good things that CSS3 has to offer.

Please use plain text.