QWebEngineView css

[TThy]

Hi all ,

I try to use css and in particular the grid properties

#header {
  border-bottom: 3px #0a162e solid;
  background: #2085e2;
  background: linear-gradient(90deg, #2085e2 0%, #1064b0 21%, #142f4a 100%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
#date {
  grid-column: 1/2;
  grid-row: 1;
  text-align: left;
}
#time {
  grid-column: 2/3;
  grid-row: 1;
  text-align: right;
}

In chrome debugger :

When we put the cursor on display: grid it says "Invalid property value".

Is it possible to use the grid properties with qtwebengine?

Thx all

T

[JonB]

@TThy
No. If it's not documented in https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties, it does not work. None of your grid-* properties appear there, only gridline-color does.

EDIT I have left this in, because it shows I jumped too soon! The above is for QWidgets. You have QWebEngineView. My bad. So that's proper CSS, and down to the Chromium engine.

I don't know whether your issue might be because you put these properties on <header>? Does it make any difference if you put them on a <div>?

[TThy]

unfortunately no difference .
And the same code is ok to chrome.
T

[JonB]

@TThy
Can you discover (I don't know how) what version of Chromium you are using here from QWebEngineView?

P.S.
I see from e.g. you can test for features, like:

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

Give that principle a go?

[TThy]

The doc said :
This version of Qt WebEngine is based on Chromium version 80.0.3987, with additional security fixes from newer versions.

[TThy]

And if i test with your code the qtwebengine don't support grid