Update to latest QT browser to get latest available Chromium version and (hopefully) fix rendering issue

Update to latest QT browser to get latest available Chromium version and (hopefully) fix rendering issue

maximeQ4VB6
Observer Observer
1,347 Views
2 Replies
Message 1 of 3

Update to latest QT browser to get latest available Chromium version and (hopefully) fix rendering issue

maximeQ4VB6
Observer
Observer

Hello, 

 

I do work at CloudNC and we're trying to create an add-in using the palette system.

 

We've developed our app in isolation first and lately we've made the connection to your API to be able to communicate from a Python script with our palette. It's working well. 

 

That said, we've got an issue: Part of our layout is completely broken (when opened within the palette). After some investigation, we're suspicious it could be due to the usage of grid layouts in our app but going to other website from the palette seems ok so it may be different. But there's definitely a difference between latest chromium and rendering from a palette.

 

Looking at the devtool, it looks like behind the scenes the QT version you're running is using chromium v87. So I'm guessing you're using QT 5.15.3–5.15.x based on that source. Would it be possible to upgrade to QT 6.3 or even maybe 6.4 or above to get latest features from the browser?

 

Do you maybe have any other hint why the layout would be different otherwise?

 

Regards,

 

Maxime

 

 

0 Likes
1,348 Views
2 Replies
Replies (2)
Message 2 of 3

maximeQ4VB6
Observer
Observer

After some painful debugging session, I finally found out what was wrong and I believe it's completely wrong behaviour by QT here.

 

It's when we used a `fieldset` element, we got the layout completely destroyed in Fusion add-in context.

 

Here's a simple step by step repro:

- create a basic add-in that loads an HTML page
- in the body of the HTML page, put the following

 

```

<fieldset class="test-block">
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="text"></div>
</fieldset>
```
 
- add a class in the css with the following
 
```
.test-block{
  flex: 1;
  display: grid;
  $min-column-width: 250px;
  grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
  grid-gap: 1rem;
}
```
 
The layout will be in a broken state (see screenshot where it's all vertical).
 
Now replace the `fieldset` tag with a `div` for example, and the layout should be correct (see screenshot where all elements are spaced up horizontaly as expected)
0 Likes
Message 3 of 3

maximeQ4VB6
Observer
Observer

Just found this thread in stackoverflow: https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bug-on-chrome it's a chrome bug that was apparently fixed in august 2020 so upgrading Qt would upgrade chrome as well and fix this 🙂 

0 Likes