Change HTML Style in QML
-
Is possible to change html style in qml?
Does QWebView do that?
thanks -
Hi,
Which HTML style are you asking for ? Can you explain with some more details ?
-
For example, I'd like to change the size of a <div> section
<div id="container" ></div>
-
@<div id="container" ></div>@
-
div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">/div
-
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");
}
@ -
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");
@ -
You have to pass the id of the div in your example above and prepend it with #.
-
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/Jymku6vRIt's an example chart using Highcharts.
-
Try it when the page loads completely. You can use the loadFinished signal.
-
The code is already placed inside the loadFinished SLOT
-
Ok. I tested something similar and it works. Here is the relevant code:
sample.html
@
<!DOCTYPE html>
<html>
<body><p>This is some text.</p>
<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><p>This is some text.</p>
</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"); }
}
@