problem with Webview + webpage with dropdown list

[chanderk]

Hi,

I am using Webview QML element to show webpages in my application. It works fine, however, if the webpage contains a dropdown list box (for instance, picking up year of birth while registering in google), the list is not shown completely. Only the list items that fit within webview's rectangle are shown. There is no scroll bar to scroll the contents either.

Please share your experience.

Thanks,
Chandru

[izinin]

Hi Chandru,

You need to wrap WebView with Flickable to have content inside to be scrollable. See minimal implementation below:

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
    width: 360
    height: 360
    Flickable {
        anchors.fill: parent
        contentWidth: Math.max(parent.width,webView.width)
        contentHeight: Math.max(parent.height,webView.height)
        WebView{
            id: webView
            url: "http://www.nokia.com"
            preferredWidth: parent.width
            preferredHeight: parent.height
        }
    }
}

[chanderk]

Thanks for the tips izinin.

Yes, my webview was inside a flickable component. Just to make sure, I have created a helloworld app and used exactly your code, but I changed the url to "https://m.google.com/app/plus".

I could see the google plus login page on execution. After giving login credentials, I was asked to give my details (like DOB, etc..), where I tried to select the year.. Please check http://s17.postimage.org/a80gc8rb3/test.png to know how it looks.. Its not possible to scroll in this view..

-Chandru

[izinin]

Hi Chandru

I reproduced your problem. To analyze it a bit i added log into onLoadFinished event to see how WebView dimensions grows after the page is loaded. The final size is far more than device screen size. In that condition web engine doesn't need to adjust listbox height because it is less than WebView height. From the other hand you cannot restrict WebView size without losing content scrolling ability. So i think that is WebView implementation problem -- in fact it should provide scrollable content instead of necessity of scrollable container.

if it is your web content - you can workaround this problem with evaluating jscript in WebView.evaluateJavaScript ( string scriptSource ) and adjust list box size.
http://stackoverflow.com/questions/4...istbox-to-auto

Regards,
Igor

[chanderk]

Hi Igor,

Thanks for your suggestion. Unfortunately, the web content is not mine.

Is there any way to create a list box or similar qml components with the data provided by the web content ? Like in my example, when the user needs to select a birth year, can we create a dialog with list of radio-button items, one of which can be selected ?

-chandru

[izinin]

In general you can handle any web content you want to display with QML --- use XMLHttpRequest like this :

Item{
    function loadModel(model){
       var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (req.readyState === XMLHttpRequest.DONE) {
                var root = req.responseXML.documentElement;
                //parse your stuff here, and update list model
                // NOTE: QML supports limited ffunctionality of XMLHttpRequest
                // check Qt documentation
                catalogModel.append({"id": id, "icon": icon,
                                     "info": myinfo,
                                     .... etc
                                    });
            }
        
    // NOTE: XMLHttpRequest syncronous call is not supported by QML. Thus 'req.onreadystatechange'
    // will be called after 'req.send()'
    req.open("GET", "http:XXXX.com");
    req.send();
    }
        

    ListModel{
        id: myModel
    }
    
    Component.onCompleted: {
        loadModel(myModel);
     }
    
    //don't forget to make ListView and delegate!!!
    
 }