Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] QML WebView the problem with white space on the bottom
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 2 Posters 2.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • shavS Offline
    shavS Offline
    shav
    wrote on last edited by
    #1

    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!

    Mac OS and iOS Developer

    1 Reply Last reply
    0
    • V Offline
      V Offline
      vikaspachdha
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • shavS Offline
        shavS Offline
        shav
        wrote on last edited by
        #3

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

        Mac OS and iOS Developer

        1 Reply Last reply
        0
        • V Offline
          V Offline
          vikaspachdha
          wrote on last edited by
          #4

          It seems to work fine.

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

          1 Reply Last reply
          0
          • shavS Offline
            shavS Offline
            shav
            wrote on last edited by
            #5

            thanks I've solved the problem.

            Mac OS and iOS Developer

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved