Hi,
When attempting to fix various problems on the sidebar (by turning elements into flex [GitHub - CollaboraOnline/online at private/pedro/jssidebar-fix-use-cssclasses](https://github.com/CollaboraOnline/online/tree/private/pedro/jssidebar-fix-use-cssclasses) and failed to avoid the need for special cases) I discovered that wouldn’t solve it and led me to conclude that we would greatly benefit from having a simpler generated html structure, more flexible and easier to maintain. As recommended by @szyklos I’m pasting this somewhere before it gets lost/forgotten.
Note: I’m not talking about the JSON that comes from core side (vcl/jsdialog/jsdialogbuilder.cxx). What I’m referring to is the conversion from that to HTML elements that happens on online:JS side. Currently using a mix of Tables, Divs, etc. (browser/src/control/Control.JSDialogBuilder.js)
Main goals:
- Have no need for hard coded corners cases (be that on the JS or CSS side)
- And related bugs
- Reduce the number of HTML elements we are creating and all the code around to access their children
I didn’t manage to further this, but it seems **\_gridHandler** on Control.JSDialogBuilder.js would be a nice spot to try this out.
Here is a minimal proof of concept using CSS grid layout:
```xml
```
```javascript
/* testgrid.js */
var appEl = document.getElementById('app');
/* Easy to set number of rows and number of columns
just by setting the grid-template */
var rowT = 6;
var colT = 2;
var cellT = rowT + colT
var gridEl = '
Hi, I’ve just pushed demo PR of CSS Grid for sidebar and dialogs:
>
>
> This is PR which introduces CSS grid to the jsdialogs instead of old table desig…n.
> It should be polished before merge.
It requires more work with alignments, but works pretty good.
---
There was an alignment improvement on core side from @andraes_k : [https://gerrit.libreoffice.org/c/core/+/141380](https://gerrit.libreoffice.org/c/core/+/141380)
---