×

Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Dec 2007
    Posts
    104

    problem with Webview + webpage with dropdown list

    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
    http://celluleus.blogspot.com

  2. #2
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: problem with Webview + webpage with dropdown list

    Hi Chandru,

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

    Code:
    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
            }
        }
    }

  3. #3
    Registered User
    Join Date
    Dec 2007
    Posts
    104

    Re: problem with Webview + webpage with dropdown list

    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
    http://celluleus.blogspot.com

  4. #4
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: problem with Webview + webpage with dropdown list

    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

  5. #5
    Registered User
    Join Date
    Dec 2007
    Posts
    104

    Re: problem with Webview + webpage with dropdown list

    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
    http://celluleus.blogspot.com

  6. #6
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: problem with Webview + webpage with dropdown list

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

    Code:
    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!!!
        
     }

Similar Threads

  1. dropdown list
    By koraykayir in forum Symbian User Interface
    Replies: 3
    Last Post: 2010-11-02, 15:56
  2. Can I get dropdown list ID or name?
    By bartx in forum Symbian
    Replies: 1
    Last Post: 2009-12-09, 18:03
  3. Canvas based DropDown list
    By knights123 in forum Mobile Java General
    Replies: 4
    Last Post: 2009-07-27, 15:50
  4. how to implenment dropdown list ?
    By tlr in forum Symbian User Interface
    Replies: 9
    Last Post: 2009-04-15, 08:09
  5. Dropdown List or wheels ?
    By PopAndDestroy in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-02-08, 17:31

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •