[Support #180] Some row headings are missing after applying CSS style which resize table

Tags: #<Tag:0x00007fc66f6643f0>


I implemented demo at https://jsfiddle.net/janzitniak/pxcsg0j3/16/ for wrapping text in a cell therefore I used a following CSS style:

.handsontable .wraptext {
  white-space: pre-line;
  max-width: 20px;

but some row headings are missing after applying that CSS style (please click to Wrap text button at that demo).


Hi @jan.zitniak

If you use autoRowSize option and turn off outsideClickDeselects (or set to true)
the table will be well display.
Here is an updated demo - https://jsfiddle.net/nyqkgxj0/

Hi @jan.zitniak @piotr.nowak

When I use the following scenario

  1. Click A1
  2. Click the button above

I get the same effect (missing row headers) in both demos (@piotr.nowak and @jan.zitniak).
I’ve also tried the 8.0.0-beta2 https://jsfiddle.net/jtq2pgvu/ version but it works the same there.

What I’ve tried to remove this effect (but unsucceeded)

  • calling the render() method as the author
  • calling the render() method after all other operations (in the setTimeout)
  • remove all settings - here we can see the progress https://jsfiddle.net/jtq2pgvu/1/. In the result of the settings removal we get a wider column than before, but the row headers are intact.
  • reopening and closing the editor
  • reopening and closing the editor with setTimeout https://jsfiddle.net/jtq2pgvu/2/

What I’ve tried and partially succeeded

  • using colWidths inside the updateSettings method https://jsfiddle.net/jtq2pgvu/3/. However, this solution has its flaws. It may be confusing if you already use colWidths, the value is visually not corresponsing to 20 pixels, and, what may be more important, is the fact that we set up width not max-width. The ability of setting up max or min-width is not yet supported.

Final notes
I will investigate this subject further to analyze the list of CSS options that may interfere with table/cell dimensions I a way that causes misalignments.