How do I display a border around a QWebEngineView?

Question

I have a QGraphicsWidget which I am using to paint and display a number of items including a QWebEngineView using the QGraphicsProxyWidget. I am able to load web content into QWebEngineView, but I would like to make the view contain a border. I have used "setStyleSheet" to try to add a border, but this does not appear to work. The following code is in the constructor of my QGraphicsWidget class to add the QWebEngineView:

 QWebEngineView * view = new QWebEngineView();
 view->setFixedWidth(700);
 view->setFixedHeight(200);
 view->setStyleSheet("border: 10px border-color: black");
 view->load(QUrl("qrc:/myresources/guidetext.html"));

 QGraphicsProxyWidget * proxyView = new QGraphicsProxyWidget(this);    
 proxyView->setWidget(view);

This is how it currently looks: How I would like it to look like:

I assume you want a border around the browser window? That would be in the qml that creates the window that contains the browser — Jay, Sep 24 '18 at 20:06
Yes, I would like the border around the browser window, but I am not using QML... just the code above. These views are created at run time. — Michael Japzon, Sep 24 '18 at 20:19
The first thing I notice is the bad stylesheet. Let me try to fix it and I will get back to you. Stay tuned. — scopchanov, Sep 24 '18 at 20:21
Yep. I have already created a test project and I am trying to fix it. — scopchanov, Sep 24 '18 at 20:31
Normally `view->setAttribute(Qt::WA_StyledBackground); view->setStyleSheet("border: 1px solid black;"); view->setContentsMargins(1, 1, 1, 1);` should do the trick. However, it seems that the content of `QWebEngineView` does not respect the margins. — scopchanov, Sep 24 '18 at 20:58

scopchanov · Accepted Answer · 2018-10-04T12:37:56.470

Problem

Normally, setting the Qt::WA_StyledBackground attribute, then the correct stylesheet and the content margins like that:

view->setAttribute(Qt::WA_StyledBackground);
view->setStyleSheet("border: 1px solid black;");
view->setContentsMargins(1, 1, 1, 1);

should do the trick.

However, it seems that QWebEngineView does not respect the content margins:

Workaround

I would suggest you to make QWebEngineView child of another QWidget and style the parent widget instead.

Example

Here is an example I have prepared for you of how to change your code in order to implement the proposed solution:

auto *proxyView = new QGraphicsProxyWidget();
auto *widget = new QWidget();
auto *view = new QWebEngineView(widget);
auto *l = new QVBoxLayout(widget);

l->addWidget(view);
l->setContentsMargins(1, 1, 1, 1);

widget->setAttribute(Qt::WA_StyledBackground);
widget->setStyleSheet("border: 1px solid black;");
widget->setFixedWidth(700);
widget->setFixedHeight(200);

view->load(QUrl("qrc:/myresources/guidetext.html"));

proxyView->setWidget(widget);

Result

Here is the result when loading Google:

Thank you once again...the solution worked perfectly! – Michael Japzon Sep 25 '18 at 04:23 — Michael Japzon, Sep 25 '18 at 04:23

How do I display a border around a QWebEngineView?

1 Answers1

Problem

Workaround

Example

Result