Qt/QML: WebEngineView adjusting height

Question

I have a bunch of WebEngineViews in a ListView. For example:

ListView 
{
    model: myModel
    delegate: Component 
    {
        Item 
        {
            WebEngineView 
            {
                id: myWebView
                Component.onCompleted: loadHtml(model.modelData.htmlText, baseURL)
            }
        }
    }
}

How can I adjust the height of the Item once the html is loaded? The HTML in question may include images, so I want to resize the WebEngineView once everything is loaded. I suspect I can do something like:

ListView 
{
    model: myModel
    delegate: Component 
    {
        Item 
        {
            WebEngineView 
            {
                id: myWebView
                Component.onCompleted: loadHtml(model.modelData.htmlText, baseURL)
                onLoadingChanged: 
                { 
                    if (!loading && loadRequest.status == WebEngineView.LoadSucceededStatus)
                    {
                        height = ???? 
                    }
                }
            }
        }
    }
}

But I'm not sure to what I should set height.

Assign to what value? Anyway you should set size to parent item since now its height/width is zero and so set `achors.fill: parent` to `myWebView`. Btw, `Item` is excessive here. — folibis, Mar 23 '17 at 08:35
Just a small sidenote: to wrap the `WebEngineView` inside a `Component` is completely unnecessary in your case. I can't se any reason to wrap it in an `Item` either (unless `WebEngineView` is no `Item` itself, and therefore might not be used as delegate?) — derM - not here for BOT dreams, Mar 23 '17 at 08:38
Thank you for the suggestion about removing `Item`. It's probably excessive in this example but in my actual code I have other objects inside the delegate. I will update the question to better reflect what I'm trying to do. — Addy, Mar 23 '17 at 11:31
I have not tried it, but you might be looking for [`contentSize`](http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#contentsSize-prop) — derM - not here for BOT dreams, Mar 23 '17 at 13:21

score 1 · Accepted Answer · answered Mar 23 '17 at 23:16

I was able to do what I wanted with `onContentsSizeChaged' like so:

ListView 
{
    model: myModel
    delegate: Component 
    {
        Item 
        {
            WebEngineView 
            {
                id: myWebView
                Component.onCompleted: loadHtml(model.modelData.htmlText, baseURL)

                onContentsSizeChanged:
                {
                    myWebView.height = contentsSize.height;
                }
            }
        }
    }
}

Qt/QML: WebEngineView adjusting height

1 Answers1