I am using a table element in Apps to visualize some comments / descriptions users can make themselves. These strings (= one column in my element I visualize) vary in length. Entries, too long to display in the available table cell are usually truncated. Is there a way to allow for line breaks in certain columns (like it is in Excel for example).
At the moment the user must either mouseover, to see the full text, but with a font-size too small to read it easily or copy paste it manually to some other tools.
I am actually having a similar problem with column names being too long and not being displayed fully in a table. I solved it by setting manually the width property for an element, like in the following example. This does not add line breaks though, but just enlarges the column width.
{
"name": "mm_system_id",
"label": "sysID",
"width": "100px"
}
It would be nice to have an automatic option to re-size the columns so that the text is not truncated neither in the column names nor in the columns’ content though.
I recently has the same issue, and Ali told me that it can be solved by adding this “html” element to your App in which you modify the style:
{
"id": "htmlStyleElement",
"type": "html",
"config": {
"html": "<style>.o-td { vertical-align: middle!important; } .o-td div { white-space:pre-wrap!important; }</style>"
}
}
To activate, add this element somewhere on your page (it displays no content so it’s “not visible”).
4 Likes
Great solution, works perfectly. Thanks!
Though it is not 100% invisible for me, even if I define the size with 0, a small white box is shown (so I simply put it to my top right corner, where nothing else is displayed)
That is true. An alternative solution is to hide it under other elements, e.g. by placing the html element in the middle of the table you want to show and then making sure that it is listed before the table in the list of containers.
Thank you @matthias.lechner . That code was super helpful, and I adapted it a bit to make the Table Headers span over multiple lines as well by replacing the td with the th. Should anyone need it, here it is:
{
"id": "htmlStyleElement_header",
"type": "html",
"config": {
"html": "<style>.o-th { vertical-align: middle!important; } .o-th div { white-space:pre-wrap!important; }</style>"
}
}
3 Likes
@matthias.lechner @DanyEle has someone an idea if we can “limit” the resulting height of the cells? I sometimes have very large strings and want to display the first n lines. This approach above is an all-or-nothing solution and while cool and nice to know, it does not fit my needs entirely.
Perhaps one could set a maximum height of a cell, so that the cell content would be truncated if going beyond the cell’s height?
I had the case that there was one white space before each line, but only in the first row (see screenshot). I changed the code to <style>.o-td { vertical-align: middle!important; } .o-td div { white-space:normal!important; }</style> which fixed it
Since a recent One Data update, the CSS to adjust the style must be updated to
td>div {
white-space: normal !important;
}
td {
vertical-align: top !important;
border: 0px !important;
}