Headers word wrap problem

Getting help Questions
1

Hello. I have seen same topic about this problem, but there is no decision for my problem.

  • “handsontable-pro”: “^1.15.0”
  • “vue-handsontable-official”: “^1.0.0”

I have the following problem.

with default CSS & wordWrap: true, I have this situation

3.PNG378×155 5.13 KB

The text does not fit the width of the cell and it is simply clipped

But, if I make some changes in CSS rules:

.handsontable {
  th {
    white-space: normal !important;
    word-wrap: break-word;
  }
}

Now text is totally fine, but now I have another roblem with th-cells height:

4.PNG377×338 7.11 KB

Is there any default methods or ways to wrap text in headers and at the same time keep the normal height of the cells ?

2

Hi @a.dugaev1

Have you tried a simple <br> is the header?

3

Hi @aleksandra_budnik!
In some sections of my app I can’t do this, because all vaules for headers is getting from database.

4

Hm… so let’s test the rowHeader behavior, meaning, why they are so high. Do you load multi-level data inside cells in the ‘too high’ rows? Normally headers are higher than their content if you have a larger amount of data.

5

4.PNG1437×781 70.9 KB

I thought so. But in this cell there is no other “extra data” inside.
If I will remove this css rule, the height of this cell will be normal.

6

Could you send me a demo for tests? Maybe we will be able to isolate only rowHeaders and work on them

7

I am closing this issue as there’s no reply for more than 3 weeks.