Selection for overflowing cells not working as expected

Tags: #<Tag:0x00007efc64b7aae0>
#1

Hi,

I am trying to replicate the same experience that Excel provides, please see below.

image

The text is overflowing from Cell A to cell B.

image

Clicking anywhere within the Cell B boundary even on the overflowing text will select Cell B.

One of our products was designed in such a way that the first N columns will be shrunk and allowed to overflow up to column N + 1. To facilitate this behavior, we have set wordWrap in settings to be false, and added the following CSS to allow overflow:

.handsontable td {
overflow: visible !important;
}

This text starts from Column A, and spans up until Column D. The text itself covers Column B and C completely, so even if I select Columns B or C within their own boundary, the selection will always go to Column A, making Cell B2 and C2 impossible to select.

image

image

When selecting Columns B or C within their own boundary, selection always goes to Column A.

Not sure if this is technically possible in the browser? Appreciate any suggestions, thank you.

#2

Hi @prakoso.santoso

we had plans to add this functionality of text overflow. However, we did not make any pull requests yet that can help you to build that feature.

#3

Hi @aleksandra_budnik

Is there any thread on GitHub that I can follow regarding this feature?

#4

Also, not sure if this is related but when selecting cells that are overflowing, they do not show correctly in the selection:

image

#5

This task was a part of a bigger one that was closed. However, we will be gathering new settings based on Accessibility. The cell editor is still under investigation and we did not create the list of tasks for it yes. It should be added in October. At the moment, I do not know if the overflowing of the text to another cell meets those guidelines.

When it comes to the selection and custom cell arrangement that may happen. Cell selection is calculated based on the mouse events and cell coordinates. That would need to be investigated. Based on an image it is hard for me to tell if that behavior can be altered.

#6

Hi @aleksandra_budnik

Thank you for the follow-up. I have created a fiddle to illustrate this issue: https://jsfiddle.net/uv28spwg/

When selecting on frozen cells (I have set fixedColumnsLeft to 3 in this case), the overflowing text is blocked, it appears that when the “area” class is added to each individual td element that happens during selection, it does not respect text overflowing from the left.

image
image

I found that disabling the position property of cells that has the “area” class solves the overflow problem, but it removes the highlight background entirely.

image
image

image
image

I have tried to fiddle with the :before pseudo-element CSS properties, but I am not quite sure what to do here to solve my current issue. Any advice / suggestion will be greatly appreciated. Let me know if you need any more information.

image

#7

With removing the relative value from a property, you can use unset, like here

.handsontable td.area {
  position: unset !important;
}

demo https://jsfiddle.net/vd7a0kxz/

But it might be harder with the selection to show only on edges (not between the cells)

#8

Yeah but seems like setting the position to unset has the same as just removing the property entirely, which removes the background color that appears as an overlay during selection. The extra line in between the selection between the frozen / non-frozen cells could still be acceptable by the users.

But I think the issue in the OP and this selection issue might be quite problematic. I am happy to provide any more information that could help your team in providing possibly hacky way to solve this if it is too hard to resolve by releasing official fixes at this point of time.

#9

I appreciate your willingness to help.
I think that this subject will come back to us sooner than we may expect. And if that happens, I will make sure to send you an email with the details.