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
New Contributor
Posts: 6
Registered: ‎05-21-2013
My Device: Simulator bb10
My Carrier: no

ActionBar hides WebView. How to change size of WebView to avoid this hiding.

Hello,

 

I have a Web view in my app and ActionBar hides a bottom part of Webview. What schould I do to fit my WebView to the screen above Action Bar?

 

Here is my QML Fragment:

 

             WebView {
         
                        id: webViewObj
                        visible: true
                        verticalAlignment: VerticalAlignment.Fill
                        horizontalAlignment: HorizontalAlignment.Fill
                        settings.viewport: {
                            "width": "device-width",
                            "height": "device-height",
                            "initial-scale": 1.0
                        }
    
    ...
    
        }

 

Highlighted
Developer
Posts: 1,159
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: ActionBar hides WebView. How to change size of WebView to avoid this hiding.

Welcome to the forums. You are correct that the action bar covers the bottom of a WebView, even though the WebView thinks it occupies the full height, but normal practice is to place a WebView inside a ScrollView so the user can still see the hidden content by scrolling.


IgorHH wrote:

Hello,

 

I have a Web view in my app and ActionBar hides a bottom part of Webview. What schould I do to fit my WebView to the screen above Action Bar?

 

Here is my QML Fragment:

 

             WebView {
         
                        id: webViewObj
                        visible: true
                        verticalAlignment: VerticalAlignment.Fill
                        horizontalAlignment: HorizontalAlignment.Fill
                        settings.viewport: {
                            "width": "device-width",
                            "height": "device-height",
                            "initial-scale": 1.0
                        }
    
    ...
    
        }

 






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 54
Registered: ‎05-14-2013
My Device: LE Z10
My Carrier: Ben(T-Mobile network)

Re: ActionBar hides WebView. How to change size of WebView to avoid this hiding.

I have the same problem, only I don't want to put my webview into a scroll view. I tried to make the webview fixed heights, but that didn't behave as expected. The title bar does not overlap.
The only solution I could come up with is to make a custom actionbar in cascades, mimicking the real actionbar. Or does anyone have a better solution?

Also, I believe the action bar has different heights depending on the type of phone and even the landscape/portrait view. Does anyone know how to fetch this height in cascades?
Don't forget to mark as solved and like my post if it helped out!
Developer
Posts: 1,159
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: ActionBar hides WebView. How to change size of WebView to avoid this hiding.

Yes, you are correct, action bar height is affected by both the device and the orientation. Even worse, on a keyboard device and a touch device in landscape the action bar is hidden at the discretion of the OS as needed.

 

Using a ScrollView has some side benefits when trying to determine the actual viewport height. I haven't tested this, but have you considered putting the WebView inside a ScrollView with the ScrollMode set to None?


ETitus wrote:
I have the same problem, only I don't want to put my webview into a scroll view. I tried to make the webview fixed heights, but that didn't behave as expected. The title bar does not overlap.
The only solution I could come up with is to make a custom actionbar in cascades, mimicking the real actionbar. Or does anyone have a better solution?

Also, I believe the action bar has different heights depending on the type of phone and even the landscape/portrait view. Does anyone know how to fetch this height in cascades?





Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 54
Registered: ‎05-14-2013
My Device: LE Z10
My Carrier: Ben(T-Mobile network)

Re: ActionBar hides WebView. How to change size of WebView to avoid this hiding.

Interesting, I've been playing arround with it, and as it turns out if you put a webview into a scrollview, with 

id: scrollview
scrollViewProperties.scrollMode: ScrollMode.None

 you can use the following to get the height property:

scrollview.viewableArea.height

 Next you could transfer this number to the webview page you included(if it's an asset) and tell it to be that height.

I'll keep you posted when I get it working!

Don't forget to mark as solved and like my post if it helped out!
Developer
Posts: 1,159
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: ActionBar hides WebView. How to change size of WebView to avoid this hiding.

Yes, that is basically what I was suggesting. ScrollView give you some useful extra functionality when it contains a WebView. I'm interested to hear what you find out.


ETitus wrote:

Interesting, I've been playing arround with it, and as it turns out if you put a webview into a scrollview, with 

id: scrollview
scrollViewProperties.scrollMode: ScrollMode.None

 you can use the following to get the height property:

scrollview.viewableArea.height

 Next you could transfer this number to the webview page you included(if it's an asset) and tell it to be that height.

I'll keep you posted when I get it working!






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.