Anyone know how to archive “wrapping” header text? as below
for rowHeader, already tried the following css, with no luck.
.handsontable td, .handsontable td.rowheader {white-space: normal !important;}
Hi,
Did you try to replace “normal” with “pre-wrap” ?
More info here: Apply word-wrap in rowFormat - #2 by lcusiel
I had thought that wrapped column headers didn’t work in UX but just tried pre-wrap on th.ibcs and it is now supported in UX (or perhaps it had been this way for a while now)!
I defined a th.ibcs class and set the ibcs-class attribute of the column dimension to the name of this header class (“test”)
Thanks Wei. Which version of UX you are using? I tested your method, but it doesn’t work on my 2021.02 FP2.
Update: I managed to make it work in 2021.02 FP2. however, it seems not very stable. it is not working if I refresh the whole page, or click for “sorting”.
I think “column header” wrapping still the “must-to-have” feature, and it should be just simple like:
.handsontable th {white-space: pre-wrap !important;}
Not sure if it is because of the existing features make it difficult, e.g. sorting, filtering etc.
Thanks Ulas. “pre-wrap” works. and the exact CSS is as below:
.handsontable td.rowheader-wrapping > div > div
{white-space: pre-wrap !important;}
so I can use the class “rowheader-wrapping” in tables, where I want to wrap the text.
@lwang, I’m also on 2021.02 FP2. There does seem to be inconsistent formatting when wrapping the column headers, esp when the wrapped header takes up more than two rows (or if there are long words). In these situations, it would sometimes cut off the first row of the data. In my limited testing, it does seem to work relatively well when there are shorter words with spaces in between that span two rows (i.e., similar to my screenshot).
I agree that having some type of automatic column-wrapping behavior would be nice. Perhaps it can activate automatically based on the colWidth value of the column or as a th table header class as you suggested.