Hello all,
we are using TMSWebCore with the HTML-Templates approach for our web-application. This is working fine overall and enables us to style the website using tailwindcss.
The TWebStringGrids are causing problems however. First of all, when they get an ElementID, they are rendered as plain text in the browser. Setting the ElementID "test" results in the following:
span id="test" zindex="0" tabindex="1" role="" style="overflow: hidden; outline: none; position: relative; box-sizing: border-box; border: 1px solid rgb(192, 192, 192);">table#testtbl td { overflow: hidden; text-overflow: ellipsis; white-space:nowrap; border: solid 1px #c0c0c0; padding: 0px;}
table#testtbl td.selected { background-color: #5b8fff; color: #ffffff;}
table#testtbl tr.selected { background-color: #5b8fff; color: #ffffff;}
table#testtbl DIV.cell {word-wrap: normal; white-space: normal; text-overflow: clip; } </span>
Secondly, it is very very hard to style them. When I want a grid to span the whole page, I need to set the "width: 100%" on many different elements, for instance on:
- the initial span
- the table directly under the span
- span > table > tr:nth-child(2) > td:nth-child(2)
- span > table > tr:nth-child(2) > td:nth-child(2) > div > div > table
This gets rather tedious and makes simple tasks like growing a grid to the full page size very hard.
Is there a better way to do something like this? Ideally we would give the rows and columns values for width and height (e. g. 20%) directly in the .dfm-file and the grid would render accordingly.
If using css is the correct way, can we somehow work around the selectors described above? Or is writing them necessary?
Thanks in advance and all the best!