Change HTML Style in QML

aenima1891

Is possible to change html style in qml?
Does QWebView do that?
thanks

p3c0

Hi,

Which HTML style are you asking for ? Can you explain with some more details ?

aenima1891

For example, I'd like to change the size of a <div> section

aenima1891

@<div id="container" ></div>@

aenima1891

div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">/div

p3c0

You could use "findFirstElement":http://qt-project.org/doc/qt-5/qwebframe.html#findFirstElement to get the exact div and then use "setStyleProperty":http://qt-project.org/doc/qt-5/qwebelement.html#setStyleProperty to set the properties of style.
Some thing like this:
@
QWebElement ele = webView->page()->mainFrame()->findFirstElement("#container");
if(!ele.isNull()) {
ele.setStyleProperty("height","850px");
}
@

aenima1891

thank you for your suggestion.
this methods are available only in QWidgets and not in QML, is it right?
However, I'm trying to use your code but the content of my WebView doesn't change.

this's my code in webView loadfinished event handler

@
QWebElement divContainer = this->ui->webView->page()->mainFrame()->findFirstElement("div");

divContainer.setStyleProperty("height", QString::number(this->ui->webView->height()) + "px");
divContainer.setStyleProperty("width", QString::number(this->ui->webView->width()) + "px");
@

p3c0

You have to pass the id of the div in your example above and prepend it with #.

aenima1891

I'm sorry, but I don't see any improvement

Now my code is

@QWebElement divContainer = this->ui->webView->page()->mainFrame()->findFirstElement("#container");

divContainer.setStyleProperty("height", QString::number(this->ui->webView->height()*90/100) + "px");
divContainer.setStyleProperty("width", QString::number(this->ui->webView->width()*90/100) + "px");

@

I'm going to show you also the html page that I'm trying to view.
"http://pastebin.com/Jymku6vR":http://pastebin.com/Jymku6vR

It's an example chart using Highcharts.

p3c0

Try it when the page loads completely. You can use the loadFinished signal.

aenima1891

The code is already placed inside the loadFinished SLOT

p3c0

Ok. I tested something similar and it works. Here is the relevant code:

sample.html
@
<!DOCTYPE html>
<html>
<body>

<div id="mydiv" name="mydiv" >
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>

</body>
</html>
@

and somewhere in cpp
@
ui->webView->load(QUrl("file:///root/sample.html"))
ui->webView->show();
@

and the slot
@
void Dialog::onLoadFinished(bool status)
{

QWebElement ele = ui->webView->page()->mainFrame()->findFirstElement("#mydiv");
if(!ele.isNull()) {
    ele.setStyleProperty("height","850px");
}

}
@