[SOLVED] QML WebView the problem with white space on the bottom



  • Hi everyone!

    I have the strange problem with "white space" on the bottom of WebView component. Please see the image:
    !http://www.dshav.com/pub_pictures/WebView_problem.png(image)!

    The code of WebView:
    @
    Rectangle {
    id: browserView
    width: parent.width
    height: parent.height - headerPanelItem.height
    color: "red"
    clip: true

                WebView {
                    id: webView
                    anchors.fill: browserView
                    boundsBehavior: Flickable.StopAtBounds
                    url: (blogItem !== null) ? blogItem.link : ""
                }
            }
    

    @

    Could you help me to solve this strange issue? Thanks for the any help!



  • I guess you forgot to position the browserView.
    !http://www.vystosi.com/shared/issue.png(y pos)!



  • Thanks for the reply!

    Sorry I post not full source code and you can't see the Column object which has the webview. There are full source code of QML file:
    @
    import QtQuick 2.3
    import QtQuick.Controls 1.2
    import QtQuick.Dialogs 1.1
    import QtQuick.Controls.Styles 1.2
    import QtQuick.Window 2.0
    import QtWebKit 3.0
    import QtQuick.Layouts 1.1
    import QtGraphicalEffects 1.0
    import com.shav.qtforum 1.1
    import "RSS"
    import "Panels"

    Rectangle {
    id: browser
    clip: true
    color: "transparent"

    property var blogItem: null
    
    function setBlogItem(item) {
    
        blogItem = item;
        webView.url = (blogItem !== null && blogItem !== undefined) ? blogItem.link : "";
    }
    
    signal backButtonClicked()
    
    Rectangle {
        id: contentView
        anchors.fill: parent
        color: "transparent"
        clip: true
    
        Column {
            id: contentViewColumn
            anchors.fill: parent
    
            Item {
                id: headerPanelItem
                width: headerItem.width
                height: headerItem.height - (2 * headerShadow.radius)
                clip: false
                z: 99999
    
                Item {
                    id: headerItem
                    width: headerView.width
                    height: headerView.height + (2 * headerShadow.radius)
                    clip: true
    
                    Rectangle {
                        id: headerView
                        width: contentView.width
                        height: 35
                        color: "white"
    
                        Row {
                            id: headerContentRow
                            anchors {fill: headerView; rightMargin: 5; leftMargin: 5}
    
                            Button {
                                id: btnBack
                                width: 40
                                height: 27
                                anchors {verticalCenter: headerContentRow.verticalCenter}
                                text: qsTr("Back")
                                style: ButtonStyle {
                                    label: Label {
                                        id: btnBackLabel
                                        width: control.width
                                        height: control.height
                                        text: control.text
                                        verticalAlignment: Qt.AlignVCenter
                                        horizontalAlignment: Qt.AlignHCenter
                                        color: "#44a51c"
                                        font {family: "Helvetica Neue"; pointSize: 12}
                                        opacity: (control.pressed) ? 0.5 : 1.0
                                    }
                                }
    
                                onClicked: {
                                    backButtonClicked();
                                }
                            }
                        }
                    }
                }
    
                DropShadow {
                    id: headerShadow
                    anchors.fill: source
                    cached: true
                    horizontalOffset: 0
                    verticalOffset: 2
                    radius: 3.0
                    samples: 16
                    color: "#80000000"
                    smooth: true
                    source: headerItem
                }
            }
    
            Rectangle {
                id: browserView
                width: parent.width
                height: parent.height - headerPanelItem.height
                color: "red"
                clip: true
    
                WebView {
                    id: webView
                    opacity: 0.5
                    anchors.fill: browserView
    

    // boundsBehavior: Flickable.StopAtBounds
    url: (blogItem !== null) ? blogItem.link : ""
    }
    }
    }
    }
    }
    @

    Also I've added opacity for my WebView and you can see web view has height the same as parent object.
    !http://www.dshav.com/pub_pictures/WebView_with_opacity.png(image)!





  • thanks I've solved the problem.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.