Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    How to display the scrollbar of WebView element?

    QML and Qt Quick
    5
    9
    10270
    Loading More Posts
    • 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.
    • Q
      qiezi last edited by

      I have write a browser view:

      @WebView {
      width: 300
      height: 200
      url: "http://www.msn.com/"
      }@

      It didn't display the scrollbar of WebView, how to display it?

      1 Reply Last reply Reply Quote 0
      • C
        Chuck Gao last edited by

        Try QML Flickable Element :-)

        Chuck

        1 Reply Last reply Reply Quote 0
        • D
          DenisKormalev last edited by

          Yep, WebView inside Flickable will help you. Also read about adding scrollbars to Flickable in Assistant (somewhere in Flickable element reference afair).

          1 Reply Last reply Reply Quote 0
          • Q
            qiezi last edited by

            Thanks Chuck and Denis.

            I found a demo:
            http://code.google.com/p/aranduka/source/browse/src/FlickableWebView.qml?spec=svnbd01e07f1a737235ad73a7283f6a3418dd219d4b&r=bd01e07f1a737235ad73a7283f6a3418dd219d4b

            It can scrolled with dragging, but can't scrolled with mouse wheel, and I didn't find some mouse wheel. Any help?

            1 Reply Last reply Reply Quote 0
            • M
              matrixx last edited by

              At the moment, QML MouseArea cannot handle mouse wheel events (http://bugreports.qt.nokia.com/browse/QTBUG-7369), but it could be implemented in C++ side if it's absolutely necessary to apply scrolling by mouse wheel :)

              Nokia Certified Qt Specialist

              1 Reply Last reply Reply Quote 0
              • C
                Chuck Gao last edited by

                Hi Andri,
                I'm not sure, but maybe there is something wrong or incomplete in your demo code. The wheel is supported in Flickable area.

                Here is some snip code, and it works well with wheel.
                @
                Item {
                id: nurtrationView
                width: parent.width
                height: 500
                anchors.top: btnGroup.bottom
                anchors.left: parent.left
                Flickable {
                anchors.fill: parent
                contentWidth: parent.width
                contentHeight: fact.height
                interactive: true
                clip: true

                        NurtritionFacts {
                            id: fact
                            anchors.centerIn: parent
                            width: nurtrationView.width - contextMargin
                        }
                    }
                }
                

                @

                Chuck

                1 Reply Last reply Reply Quote 0
                • Q
                  qiezi last edited by

                  Hi Chuck, I have tested Image inside Flickable. The code is:

                  @import QtQuick 1.0
                  import QtWebKit 1.0

                  Rectangle {
                  width: 1024
                  height: 600

                  Flickable {
                  id: flickable
                  width: parent.width
                  height: parent.height / 2
                  contentWidth: webView.width
                  contentHeight: webView.height
                  interactive: true
                  clip: true

                  WebView {
                  id: webView
                  url: "http://www.msn.com/"
                  preferredWidth: flickable.width
                  preferredHeight: flickable.height
                  }
                  }

                  Flickable {
                  y: parent.height / 2
                  width: parent.width
                  height: parent.height / 2
                  contentWidth: image.width
                  contentHeight: image.height
                  interactive: true
                  clip: true

                  Image {
                  id: image
                  source: "http://annoytheleft.files.wordpress.com/2009/12/white-house.jpg"
                  }
                  }
                  }@

                  The WebView can scroll with dragging, but can't scroll with wheel.
                  The Image can scroll with dragging and wheel.

                  How can I fix it?

                  1 Reply Last reply Reply Quote 0
                  • J
                    Jens last edited by

                    You can try out the desktop components. It has both a scroll area with scrollbars as well as scrollwheel support implemented through a c++ plugin item.

                    http://qt.gitorious.org/qt-components/desktop

                    1 Reply Last reply Reply Quote 0
                    • C
                      Chuck Gao last edited by

                      Have a try of QML ScrollDecorator Element with Qt Quick components. Updating your SDK :-)

                      And,
                      @
                      WebView {
                      id: webView
                      url: "http://www.msn.com/"
                      preferredWidth: flickable.width
                      preferredHeight: flickable.height
                      }
                      }
                      @

                      I don't think we need use preferredWidth/Height here. Comment them and try scroll with wheel.

                      Chuck

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post