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

Native Development

Reply
Developer
Posts: 385
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

Progress Indicator Overlapping Webview

Hi, 

 

I have been trying to solve this one for a while now and came to the Support Forums for help as I have absolutely no idea what is causing this to happen.

 

I am using a webview and then using a progress indicator to show the web page loading, inside the webview. The only problem I am having is that a thin black line appears at the bottom of the page and then the progress indicator loads on top of it. 

 

According to BlackBerry 10 UI guidlines there shouldn't be any black lines on the screen; so, before I release my update, I would like to get rid of this black line. 

 

IMG_20140208_123655.png

 

Any help would be greatly appricated, thank you Smiley Happy 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Progress Indicator Overlapping Webview

[ Edited ]

That black line is your empty ProgressIndicator.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 385
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Progress Indicator Overlapping Webview

Okay, thank you Smiley Happy

 

Is there any way to make the whole of the black line transparent? As I made the container, that the Progress Indicator is, transparent but it doesn't seem to do anything

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Progress Indicator Overlapping Webview

[ Edited ]

Set its opacity to 0.

On the load request starting set it to 1.

On a load fail or on the request finishing set it back to 0.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 385
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Progress Indicator Overlapping Webview

The black line still persists even when the Progress Indicator is set to opacity: 0

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Progress Indicator Overlapping Webview

Just as a sanity check you are using a DockLayout right?


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 385
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Progress Indicator Overlapping Webview

Yep; this is the code for the Progress Indicator and then the webview is calling different functions based on the id of the Progress Indicator:

 

Container {
                        horizontalAlignment: HorizontalAlignment.Center
                        verticalAlignment: VerticalAlignment.Top

                        layout: DockLayout {

                        }
                        ProgressIndicator {
                            id: progressIndicator
                            opacity: 0
                        }
                    }

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Progress Indicator Overlapping Webview

[ Edited ]

No I meant at the top level the one that holds your WebView, this is my code (bits stripped out for clarity)...

 

Container {

        layout: DockLayout { }

            ScrollView {
            	id: scrollView

                scrollViewProperties {
                	scrollMode: ScrollMode.Both
                    pinchToZoomEnabled: true
                }
 
                Container {
                    background: Color.LightGray
            
                    WebView {
                        id: webView
                        url: "http://www.google.co.uk"

                        settings.viewport: {
                            "width": "device-width",
                            "initial-scale": 1.0
                        }
                     [ ... removed ... ] } } } Container { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Bottom bottomPadding: 30 ProgressIndicator { id: loadProgress opacity: 0.0 } }

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 385
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Progress Indicator Overlapping Webview

Adding the dock layout fixed the issue and removed the black line - thank you! Smiley Very Happy