How to use CSS grid and flexbox? 2022.2.1

OL Connect Professional Designer
1

We are trying to implement some “boxes” where to place reusable snippets for a PDF print template.

We thought to use the handy CSS grid functionalities, but it seems that the display: grid has no effect, is there something wrong with the example I am using?

Otherwise, is there a list of HTML\CSS commands Designer supports?

image
image1881×1286 86.5 KB

<div class="wrapper">
    <div class="box">
        A
    </div>
    <div class="box">
        B
    </div>
    <div class="box">
        C
    </div>
    <div class="box">
        D
    </div>
    <div class="box">
        E
    </div>
    <div class="box">
        F
    </div>
</div>

/* default.css*/

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
2

Hi @Maxiride,

CSS Grid is indeed not supported by our internal browser. We are currently on Gecko 38 (Firefox). When in doubt, you could best check the respective property on grid - CSS: Cascading Style Sheets | MDN. There is a browser compatibility table at the bottom.

For your example, couldn’t you simply stack the divs with class box without the outer wrapper? Could you elaborate on the contents of your snippets?

Erik

1 Like
3

Thanks this is a very helpful information! Is it mentioned somewhere in case in future updates the rendering engine changes?

We could indeed, it was just to play around edge cases and capabilities of the rendering to evaluate some proof of concepts for future developments.

Anyway the idea was to set a man container with display: grid and then pull in snippets at runtime according to record values. Knowing the snippet will be placed in a grid container they would have been “self-suffcient” for their positioning. Might indeed be a convoluted solution but we are also just playing around for now.

4

Thanks for the update! On Gecko 38, we are running a parallel dev track to update the engine (we have been stating this for a while but that project is still active, no eta).

5

Looking forward to a more updated version! Is there any way to be updated on the subject? I checked the changelogs but such “internals” seems that aren’t mentioned.

6

The last update was in 2018.1, after that there were some breaking changes in their APIs preventing us to do a drop-in replacement. Below some info from the respective release notes.

“The browser component (Mozilla Gecko) used in the WYSIWYG editor of the Designer has been updated. This allows you to use new CSS properties like flexbox. Connect 2018.1 now uses Mozilla Gecko 38 as its HTML rendering engine. (SHARED-42286)”

Will keep you posted.

1 Like