Instead of flex you can use css-grid. See this post for more details – https://www.notion.so/gajduk/The-road-to-responsive-tables-in-Mendix-f8a1de4595634167bd489c48b565fbe1#603b090295a8464bb2d4f760e9b5e2ac
During my research I came across the css property “display: contents;”.
from the mozilla documentation
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
This allows me (at least in a test setup) to ignore wrapping divs and enforce a table layout through css.
Having a HTML structure like the following:
<div class="mx-templategrid">
<div class="mx-grid-content">
<!-- Table -->
<div class="mx-templategrid-content-wrapper">
<!-- Table-Row -->
<div class="mx-templategrid-row">
<div class="mx-templategrid-item">
<div class="mx-dataview">
<div class="mx-dataview-content">
<div>
<div class="mx-listview">
<ul>
<!-- Table-Cell -->
<li> ... </li>
<!-- Table-Cell -->
<li> ... </li>
<!-- Table-Cell -->
<li> ... </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Table-Row -->
<div class="mx-templategrid-row">
<div class="mx-templategrid-item">
<div class="mx-dataview">
<div class="mx-dataview-content">
<div>
<div class="mx-listview">
<ul>
<!-- Table-Cell -->
<li> ... </li>
<!-- Table-Cell -->
<li> ... </li>
<!-- Table-Cell -->
<li> ... </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was able to reproduce the table layout with the following css:
.mx-templategrid-content-wrapper {
display: table;
}
.mx-templategrid-row {
display: table-row;
}
.mx-listview>ul>li {
display: table-cell;
}
.mx-listview>ul,
.mx-listview,
.mx-dataview-content>div,
.mx-dataview-content,
.mx-dataview,
.mx-templategrid-item {
display: contents;
}
Unfortunately we have to be backwards compatible until Edge v43, with which it is not supported
Also, it seems to be very experimental...
Appendix B: Effects of display: contents on Unusual Elements
This section is (currently) non-normative.
Some elements aren’t rendered purely by CSS box concepts; for example, replaced elements (such as img), many form controls (such as input), and SVG elements.
… therefor I am not sure if this is really a valid approach, but it is a solution for the of Mendix generated wrapping divs, which can be a pain to work with when styling the app.
Maybe this is viable for some cases. I thought I’d let you guys know.
I still haven’t found another good approach in order to create a dynamic amount of columns and rows.
If each table has the same amount of rows, it should be achievable using flex using properties flex-grow 1 and flex-basis 0:
https://codepen.io/Gabeler/pen/YzXNgdw
the easiest way would be to keep using flex.
figure out what width you want each colom to be and right some css like
listviewModifierClass{
&.mx-listview>ul>li {
&nth:child(1){
width: 100px
}
&nth:child(2){
width: 50px
}
&nth:child(3){
width: 30px
}
&nth:child(4){
width: 120px
}
}
}
its not super dynamic, but it is probably easiest to understand conceptually and is often good enough for most scenarios :D