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

shav

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!

vikaspachdha

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

shav

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)!

vikaspachdha

It seems to work fine.

!http://www.vystosi.com/shared/ScreenShot.png(fine)!

shav

thanks I've solved the problem.