QML Webview renders SELECT elements with x-offset

Question

I’m currently implementing a WebView which contains a web page with a select form element on the page. Whenever I click on the select box, the dialog containing the possible values is appearing off the page.

The dialog doesn’t centre itself within the WebView or the parent. On the simulator it appears just below the dropdown box on the web page but is too wide to fit on the screen (Obscuring the scrollbar) and on the device it appears in the bottom left hand corner of the screen.

Has anyone got any experience with this? I’m simply using the QML WebView item and it’s not within a Flickable (Which I originally thought would be the issue)

Background and Investigation

Two approaches to rendering this page:

A simple project which uses the Qt QWebview, and running on the simulator gives this:

enter image description here

Note: the select menu is the full width of the window.

With a simple project that uses the following QML:

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
    anchors.fill: parent

    WebView {
            anchors.fill: parent
            url: "http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option"
    }
}

would yield the following results:

Webview from QML

What am I doing wrong here? What do I need to do to my QML to make it render the menus properly?

jamesh jamesh · Accepted Answer · 2011-08-25T11:28:15

Ok. This feels wrong.

I can't believe there's a story on my board which is "As a Qt user, I can select values from a long list".

So my solution to this was inject a chunk of Javascript into the Webview using evaluateJavascript which crawls the DOM looking for SELECT elements.

When the select is clicked, then call out to QML with the list of options, and then render a QML version of the select box.

The return trip is simpler, but just as unappealing.

I tried added a click or tap listener to the select elements, but the DOM API isn't complete (will try and find a canonical link), and nothing I tried would trigger the handler. In the end, I hid it, and added inserted a button in its place.

There has to be a better way.

QML Webview renders SELECT elements with x-offset

Background and Investigation

1 Answers