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
Highlighted
Developer
Posts: 84
Registered: ‎04-22-2013
My Device: BB 10 Dev
My Carrier: Simulator

Webview height wrap content

Hi all,

I'm having the problem that the web view is taking up too much space in my page(qml).

For example, in the attached picture there's alot of space below the table.

Are there any ways that I can control my height based on the web view content (html)?

Thanks in advanceSmiley Happy

 

                    Container {
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight

                            }

                            leftPadding: 20.0
                            Container {
                                ImageView {
                                    imageSource: "asset:///images/Calculator/home.png"
                                    preferredWidth: 80.0
                                    preferredHeight: 80.0
                                    onTouch: {
                                        if (event.isUp()) {
                                            nav.navigateTo(hlb_main)
                                        }
                                    }
                                }
                            }
                            Container {
                                verticalAlignment: VerticalAlignment.Center
                                leftPadding: 20.0
                                topPadding: 5.0
                                ImageView {
                                    imageSource: "asset:///images/Calculator/arrow.png"
                                }
                            }
                            Container {
                                topPadding: 10.0
                                leftPadding: 20.0
                                ImageView {
                                    imageSource: "asset:///images/Faq/faq.png"
                                    preferredWidth: 70.0
                                    preferredHeight: 70.0
                                }
                            }

                            Container {
                                verticalAlignment: VerticalAlignment.Center
                                leftPadding: 20.0
                                Label {
                                    text: "FAQ"
                                    textStyle.color: Color.create("#151B54")
                                }
                            }

                        }

                        Container {
                            background: Color.White
                            bottomPadding: 20.0
                            Container {
                                topPadding: 20.0
                                Container {
                                    preferredHeight: 8.0
                                    background: Color.create("#ff000068")
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    preferredWidth: 768.0
                                }
                                Container {
                                    leftPadding: 20.0
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight

                                    }
                                    topPadding: 10.0
                                    Label {
                                        text: "Q1. What is Webview?"
                                        textStyle.fontSize: FontSize.Small
                                        multiline: true
                                        preferredWidth: 650.0
                                        textStyle.color: Color.Black
                                    }
                                    ImageView {
                                        id: arrow1
                                        imageSource: "asset:///images/Faq/expandArrow.png"
                                        preferredWidth: 30.0
                                        preferredHeight: 40.0
                                    }

                                    onTouch: {
                                        if (event.isUp()) {

                                            if (containerVisible) {
                                                faqListItem.visible = false
                                                arrow1.imageSource = "asset:///images/Faq/expandArrow.png"
                                            } else {
                                                faqListItem.visible = true
                                                arrow1.imageSource = "asset:///images/Faq/collapseArrow.png"
                                            }

                                        }
                                    }
                                }

                                Container {
                                    id: faqListItem
                                    visible: false
                                    WebView {
                                        html: "<html><head></head><body>A2.Hong Leong Connect  Online Banking provides the convenience of accessing your bank accounts and performing online banking transactions from an internet browser in the comfort of your home, office even after banking hours.</body></html>"
                                        settings.activeTextEnabled: true
                                        settings.zoomToFitEnabled: true
                                        settings.webInspectorEnabled: true
                                        settings.background: Color.Transparent
                                        settings.viewport: {
                                            "initial-scale": 1.0
                                        }
                                        verticalAlignment: VerticalAlignment.Fill
                                    }
                                }
                            }

                            Container {
                                topPadding: 20.0
                                bottomPadding: 20.0
                                Container {
                                    preferredHeight: 8.0
                                    background: Color.create("#ff000068")
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    preferredWidth: 768.0
                                }
                                Container {
                                    leftPadding: 20.0
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight

                                    }
                                    topPadding: 10.0
                                    Label {
                                        text: "Q2.What is BlackBerry Cascades?"
                                        textStyle.fontSize: FontSize.Small
                                        multiline: true
                                        preferredWidth: 650.0
                                    }
                                    ImageView {
                                        id: arrow2
                                        imageSource: "asset:///images/Faq/expandArrow.png"
                                        preferredWidth: 30.0
                                        preferredHeight: 40.0
                                        verticalAlignment: VerticalAlignment.Center
                                    }

                                    onTouch: {
                                        if (event.isUp()) {

                                            if (containerVisible2) {
                                                faq2ListItem.visible = false
                                                arrow2.imageSource = "asset:///images/Faq/expandArrow.png"
                                            } else {
                                                faq2ListItem.visible = true
                                                arrow2.imageSource = "asset:///images/Faq/collapseArrow.png"
                                            }

                                        }
                                    }
                                }

                                Container {
                                    id: faq2ListItem
                                    visible: false
                                    WebView {
                                        html: '<html><body><table border="0">' + '<tr>' + '<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>WEB PAGE</strong></font></td>' + '<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>DESCRIPTION</strong></font></td>' + '<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>HITS</strong></font></td>' + '<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>MONTH</strong></font></td>' + '</tr>' + '<tr>' + '<td bgcolor="#00FFFF"><a href="http://www.computerhope.com">ComputerHope</a></td>' + '<td bgcolor="#00FFFF">Main page linking to all pages</td>' + '<td bgcolor="#00FFFF"><strong>3912</strong></td>' + '<td bgcolor="#00FFFF">Feb 98</td>' + '</tr>' + '<tr>' + '<td bgcolor="#00FFFF"><a href="http://www.computerhope.com/cooltrik.htm">Cool' + 'Tricks</a></td>' + '<td bgcolor="#00FFFF">HTML cool tricks</td>' + '<td bgcolor="#00FFFF"><strong>2514</strong></td>' + '<td bgcolor="#00FFFF">Feb 98</td>' + '</tr>' + '</table>' + '</table></body></html>'
                                        settings.background: Color.Transparent
                                        settings.zoomToFitEnabled: true
                                        settings.webInspectorEnabled: true
                                        settings.activeTextEnabled: true
                                        settings.viewport: {
                                            "initial-scale": 1.0
                                        }
                                    }
                                }

                            }

                            Container {
                                preferredHeight: 8.0
                                background: Color.create("#ff000068")
                                horizontalAlignment: HorizontalAlignment.Fill
                                preferredWidth: 768.0
                            }

                        }
                    }

 IMG_00000085.png

 

IMG_00000087.png