Row height increases on scroll

Tags: #<Tag:0x00007f8b2b118448>
#1

Even with rowHeights set, rows do not maintain a constant height. It seems that the only way to set rowHeights as constant is to allow autoColumnSize which can create excessively wide columns and is not desirable. Look at the fiddle that can be accessed from this docs page: https://handsontable.com/docs/8.1.0/demo-scrolling.html. Go to the grid on the bottom right and scroll to, say, cell O5. Type in a bunch of text. Scroll back all the way to the left and then scroll over so column ‘O’ comes into view. The row height changes. This is undesirable. Is there any way to set both rowHeights and colWidths so they are maintained on scrolling regardless of the amount of text in a cell?

#2

I saw the response to [kducante] on Sep 27, 2022 for a similar question. This is not the solution I’m looking for as I want a truly constant row height and column width across all rows and columns.

Further, I’ve noticed that manualRowResize does not work with my vue3 application (manualColumnResize works fine). I tried adding manualRowResize: true and manualColumnResize: true to above fiddle and there are no issues, so not sure what the problem may be with vue3.

#3

I looked at the response to [luigifabbri1021] on Sep 8, 2022 regarding row height. I set viewportColumnRenderingOffset to the number of columns in my data. The outcome is basically the same as setting autoRowSize: true which is not my goal. I’m seeking a constant row height of, say, 30 across all rows regardless of how much text there may be in certain cells. This makes scrolling through a relatively wide grid a better user experience. If someone wants to examine the contents of a cell that may have a lot of content, they could manually adjust the row height (if that feature actually worked) or the column width.

#5

Hi @mv.wojak

An understanding of your use case is crucial here. Generally, the rowHeights settings give the minimal height of the cell. If you, for example use the colWidths and your content is larger then cell will expand its height to fit the content - that’s default behavior. Also, if you use a custom renderer that adds some visuals to the cell (for example you add an image, button or any HTML that alters the default text height) that could expand beyond the set rowHeights. If you do that, this is the place where we can use the autoRowSize: true to keep the consistency between row heights when we scroll horizontally.

But… let’s start from the beginning. Could you tell me what you keep the cells? Is there an option for you to create a demo where I will be able to replicate the same issue? That would help a lot.

#6

Hi Alexsandra:
Here is the use case: the business partner has spreadsheets that are approximated 300 rows by 150 columns. The content is purely text. Most columns/cells contains 32 characters or fewer. There are two columns that can contain thousands of characters, but this varies. For these two columns there can be cells that have little or no content and others that have thousands of characters. They want similar functionality as Excel: constant row height and constant column width when they scroll.

A good demo is the fiddle that can be accessed from the help page I pointed out: https://handsontable.com/docs/8.1.0/demo-scrolling.html. Scroll to the right to, say, cell O5 and type in a bunch of content. Scroll back all the way to the left. Then scroll to bring column O into view. The row height auto-adjusts. My business partner wants to maintain the constant row height regardless of the amount of text in a cell. They don’t need or want all the content of the cell with a lot of text fully displayed.

Thank you for your help!

#7

So it seems that the Google Sheets approach would meet the requirements (set height/width and cell value is cut until we open a cell editor)

View mode
19

Edit mode
20

If that is OK, then I propose to attach a custom cell renderer to those cells that have a high probability of holding the large text. Here’s an example https://jsfiddle.net/6z7sy58k/ for the table renderer that cuts the values. If, however, you’d prefer to use that for some cells you can use

  • columns
  • cells
  • cell

to specify the coordinates. Or even attach the renderer once the afterChange() hook specifies that the content has length > anything_you_want

#8

Terrific, it works! It seems that “the Google Sheets approach” should be the default behavior.

Thanks for your help!!

#9

I’m glad that it meets your requirements :slight_smile:

I’m closing this thread but feel free to open a new one in the future.

#10