rowHeader not aligned correctly with data rows with multiline header _and_ columnHeaderHeight specified

Tags: #<Tag:0x00007f8b23d21738>
#1

Hi,

If a header has a line break the rowHeaders are not aligned correctly with the data when columnHeaderHeight is specified and smaller than the row header.

See sample here:
http://jsfiddle.net/gate61/6L21ngjn/8/

Removing columnHeaderHeight solves the problem.

Is there a workaround ?

Thanks,

Olivier

1 Like
#2

Hi @olivier

You are settings the columnHeaderHeight to 23px which is too narrow for 2 lines of header name to appear that is why the table firstly calculates your settings and then it applies the extra text

Here is an example of columnHeaderHeight set to 46px http://jsfiddle.net/handsoncode/wz4v2r2r/ which is exactly the value that is needed for the double-line header to appear.

1 Like
#3

Hi,

Thanks for answering. I understand, of course that 23px is too small.
I can set the header to 46 but it will be too small if the header has a second
…
I’m getting the headers from a database and there’s no way to know how big headers could be.

Having the possibility to use html tags like
and specifying the header height makes them incompatible and the result weird.

As the columnHeaderHeight is an option, I was expecting/wishing the header to be max 23px (or 46px) and the header text to be striped if exceeding this value.

So it seems my only solution is to never specify columnHeaderHeight.
Unless there’s a way to limit the header height (CSS ?).

Thanks anyway !

1 Like
#4

Yes, you can use CSS via afterGetColHeader hook. Here is an example http://jsfiddle.net/handsoncode/0e0bd2o7/

Let me know if it meets your project requirements.

#5

I tried changing the height of

.ht_clone_top_left_corner th {
  background-color: #F00;
  height: 23px;
}

The background colour is changed, the height is not. I suppose it’s calculated and changed by hot…
My best option will be to discard the rowHeaderHeight and let the browser adapt the height to the highest header…

I’ll play around with your hook and see what I can do.

Thanks anyway !

#6

Hi @olivier

have you found anything?

I think that this topic can interest you as well https://github.com/handsontable/handsontable/issues/4021

#7

Hi @aleksandra_budnik,

Thanks for asking. The topic you mentioned is interesting but doesn’t solve my problem, it doesn’t provide a solution and it’s about regular rows, not header rows.

I stick with my workaround which is to remove columnHeaderHeight setting which is not really needed in my case.
When there’s no columnHeaderHeight the rowHeader height increase smoothly if the header becomes bigger.

From my point of view this is still a bug as HT allows html tags in the header and provide columnHeaderHeight option. It should the behave correctly and adapt the rowHeader height to the highest row header height.

As in my case headers are coming from a database, a “maxColumnHeaderHeight” would be the best option, with an overlap to limit text height.
Maybe worth a feature request ?
Similar maxRowHeight would be nice, even for cells with simple but long text (not html) when wrapping (wordWrap: true) sometimes results in very high rows.

1 Like
#8

Hi @olivier

Thank you for your update and suggestions.

For the maxRowHeight option I can propose a temporary workaround where you wrap a content of a cell with DIV with some predefined CSS settings (height and overflow: 'hidden').