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
Trusted Contributor
Posts: 118
Registered: ‎03-06-2013
My Device: Blackberry Z10
My Carrier: Airtel
Accepted Solution

scrolling issues on few pages

hi, i have a web works application, in many pages, tehre are scrolling issues like bouncing , user able to drag beyond screen kind of issues, how to solve these.

--------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
BlackBerry Development Advisor
Posts: 652
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: scrolling issues on few pages

Hello,

 

You should be able to solve this by setting the viewport properly.  We have a Knowledge Base article that talks about this over here, it shows you the 'old' (BBOS) way, and the new BB10 way.

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

Trusted Contributor
Posts: 118
Registered: ‎03-06-2013
My Device: Blackberry Z10
My Carrier: Airtel

Re: scrolling issues on few pages

i tried doing the same, i have couple of doubts here:
1. my application is a cross platform app, so do i need to remove the meta tag already added in html and add it dynamically for bb10?
2. in the link, meta tag has content without width specified as width=device-width, becuase of which i feel the font looks little low, without setting viewport, font is much better, any reason for this?
--------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
BlackBerry Development Advisor
Posts: 652
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: scrolling issues on few pages

You could try adding it dynamically, but I have a feeling it may not work then because of the fact that the page is already loaded by the time you insert the script/meta tag?

 

From my experience the fonts shouldn't be any lower quality at all.

Retired
Posts: 165
Registered: ‎09-24-2012
My Device: Passport
My Carrier: Bell

Re: scrolling issues on few pages

The viewport hack in the provided KB will ensure your application is able to use all the physical pixels on the device. So on Z10, you will get 1280x768, iPhone 5 - 1136x640. This can be troublesome when targeting multiple pixel densities, so instead you can use the meta viewport tag you already use, and use percentages, and avoid any content overflowing it's parent unless you need it to.

 

This is what I set my body and html to, keep the same pattern, and remember, margins will cause a div to overflow, even if it's height and width are 100%.

 

body,html{
   position:fixed;
   width:100%;
   height:100%;
   overflow:hidden;
}

Web Inspector is your best friend when trying to locate overflow content. https://developer.blackberry.com/html5/documentation/web_inspector_overview_1553586_11.html

 

FYI, margins and padding also cause overflow when using 100% width and height, so you can use the following instead:

 

//the following div is guaranteed not to overflow its parent
.some-div{
   position:absolute;
   top:0;
   left:0;
   right: 0;
   bottom: 0;
}

 

 

Trusted Contributor
Posts: 118
Registered: ‎03-06-2013
My Device: Blackberry Z10
My Carrier: Airtel

Re: scrolling issues on few pages

@anzor_b , you have understood my problem correctly, as its a cross platform application, i have to live with that viewport. one more thing to mention, in my application i have iscroll being used on pages, so do u think that might cause a problem? what my problem exactly is, sometime, user will be able to drag down the whole screen , along with header and will be able to see the black patch in the background after dragging down or up also. i am not sure if putting the css styles as u have suggested above will help me
--------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
Trusted Contributor
Posts: 118
Registered: ‎03-06-2013
My Device: Blackberry Z10
My Carrier: Airtel

Re: scrolling issues on few pages

adding iscroll to the page solved my problem, now there is no bounce effect for whole page, but the bounce is only for body between my header and foooter
--------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
Developer
Posts: 434
Registered: ‎07-23-2012
My Device: Blackberry 10
My Carrier: Orange

Re: scrolling issues on few pages

where you have added iScroll. i mean you have added in the head part of the html or @ run time you are adding

Thanks
-------------------------------------------------------------------------------------
Press the Accept as solution Button when u got the Solution
Press Kudo to say thank to developer.
-------------------------------------------------------------------------------------.
Trusted Contributor
Posts: 118
Registered: ‎03-06-2013
My Device: Blackberry Z10
My Carrier: Airtel

Re: scrolling issues on few pages

i have added in html file for the body content and it started working fine.came to know that data-iscroll adding cannt be done dynamically, but removal can be done dynamically.
--------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
Developer
Posts: 434
Registered: ‎07-23-2012
My Device: Blackberry 10
My Carrier: Orange

Re: scrolling issues on few pages

Thanks @ lathajagan. you have resolve my problem :-)

Thanks
-------------------------------------------------------------------------------------
Press the Accept as solution Button when u got the Solution
Press Kudo to say thank to developer.
-------------------------------------------------------------------------------------.