Wrap text / increase cell height within cell for table

App Building
, ,
1

Hi all,

I did not manage to find a way to wrap cell content and column name within a table.

So far I have this table :

image

and would like to increase cell height for column name and other rows and wrap text / content within these cells.

Any ideas ?

Many thanks

2

Hi @tm57!

This can be done for the contents of cells, but unfortunately not for the column titles. To get cell text to wrap within the column cells, there is a setting called 'Allow Overflow' inside the column settings:

1062×1268 129 KB


Hopefully this helps!

3

Hi @ben

Many thanks for your answer. I tried the overflow but not seems to do the "wrapping" within my table.

Column "Piece" for example:

image
image453×518 22.7 KB

image
image607×794 64.3 KB

For the headers if it is not possible how to decrease police size ? I tried to do it with a CSS script but did not manage to select the table with this script:

image
image752×502 22.4 KB

Do you see an issue here ?

Many thanks!

1 Like
4

Just managed to do it with CSS custom below :

._retool-TableWidget .cell-container {
font-size: 10px!important;
overflow-wrap: break-word!important;
}

._retool-TableWidget .rt-column-header-name {
font-size: 10px!important;
}

._retool-TableWidget .rt-th.rthfc-th-fixed.rthfc-th-fixed-left.rt-resizable-header.-cursor-pointer {
overflow-wrap: break-word!important;
}

._retool-TableWidget .rt-th.rt-resizable-header.-cursor-pointer {
overflow-wrap: break-word!important;
}

However and as you mention it is not working for column name. As my column names are a bit long , do you know if it is possible to add a n overhead line / kind of categories / Top level headers ?

5 Likes
5

Since this is the conversation that pops up with googling how to wrap text in Retool and is from 2021, I want to point out that the new way to do this is to select the column type as "Multiline Text" - not just Text or Auto - when looking at the column settings for a table. This will allow the row cell to show the entire content of the text in that column row.
As for showing the entire column name, I have not found another way other than click-and-drag to the desired column length.

2 Likes
6

This seems to only work on the legacy table

7

Hey David! Thank you for the callout. I created an internal feature request to introduce the ability to wrap both column text and headers in the new table :slight_smile: Will keep this thread updated!

1 Like
8

Any update or workaround as to how we can wordwrap text in the new table?

9

Hey @maillme, thanks for bumping this! The new table should now support the Multiline String column type:

You can also set your table's Row height to Dynamic to fit all of your text:

Multiline columns still aren't supported at the moment. As a temporary workaround you might try something like the following custom CSS, replacing table1 with your table's id:

._retool-table1 ._TZGEl._X9iXl span {
    white-space: pre;
}

._retool-table1 ._xov9f._x4j1F {
    height: max-content !important;
}

Let me know if that works!

10

Any update on the column names allowing wraptext or a css workaround?

11

Had luck with this custom CSS:

/* adjust table header text wrap */

  • ._xov9f.x4j1F .-pifF._4EzI8 {
    white-space: wrap
    }

/* adjust table header heights */

  • ._xov9f._x4j1F {
    height: 50px;
    }

/* adjust table header text location */

  • ._xov9f._x4j1F ._fDjNG {
    align-items: start;
    }

image

12

No update yet on text wrapping in column headers. Thanks for posting the CSS you're using here @SplinteredGlassSolutions!