Last column width error

Tags: #<Tag:0x00007efc705208a0> #<Tag:0x00007efc70520710>
#1

When I use “autoRowSize” and “autoColumnSize” as true, I am having problems with the width of the last column of the table, as shown in the image

tabela
tabela.png767×265 26.9 KB

these are the settings used:

allowRemoveRow: false,
allowInsertRow: false,
autoRowSize: true,
autoColumnSize: true,
contextMenu: true,
filters: true,
columnSorting: true,
dropdownMenu: true,
language: 'pt-BR',   
width: '100%', 
height: '100%',
#2

Hi @jonatas.locateli

I tried to recreate the issue, but I can’t get the same results: https://jsfiddle.net/handsoncode/m06ywbrt/

Can you please modify this example so the problem can be replicated?

#3

I tried to recreate, but the problem did not occur: https://jsfiddle.net/handsoncode/m06ywbrt/.
Do you have any idea what could be causing this in my case?

#4

@jonatas.locateli

I would need to see a demo where the problem occurs to be able to tell more. Some visual errors might be produced when you modify core elements CSS or if Handsontable is placed inside other, styled container.

#5

@adrian.szymanski fwiw, I confirm I noticed the width of the last column started being inadequate after upgrading from 13.0.0 to 14.6.1. I agree that the issue is not reproducible in jsfiddle in a “clean” environment. I am working on figuring out what makes the difference when used as part of our project (no luck yet).

#6

@adrian.szymanski found it. Long story short if the container is invisible, the last column turns out very narrow (unlike with 13.0.0)

Here is my use case:

  1. init a Handsontable instance attached to a div within a jqxWindow that’s not open https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxwindow/jquery-window-getting-started.htm
  2. init other things, load data etc
  3. open the jqxWindow only when everything is ready

Solved by opening the window before initing a handsontable, but I’d call this a regression.

#7

Hi @kohowski

Thank you for your input and investigation. Can I ask you to try prepare an example in different sandbox or even on GitHub where this issue can be replicated?

#8

Hi @kohowski

we do not officially support jqxWindow, so we cannot call any-related issue a regression. But as @adrian.szymanski mentioned a demo would help us replicate an issue. Maybe it is related to a general window CSS setup - then we could call that a regression and fix it.

#9

@aleksandra_budnik @adrian.szymanski there you go guys https://jsfiddle.net/seqpm0a4/

try to remove the “display: none” and see how it changes back to normal.

A minimal combination of features that seems to trigger this is an overridden height (my tables are long and I want them to scroll vertically) + a hidden column. Those two + initially invisible container result in the last column being unreasonably shrunk.

#10

Thank you for sharing, @kohowski

Handsontable relies on being able to calculate the size and position of elements in the DOM. When an element is set to display: none , it is removed from the layout, and Handsontable cannot measure or calculate it, which may cause issues with its calculations and rendering. For Handsontable to function correctly, the element needs to be visible or at least occupy space in the layout.

We have this issue mentioned in a couple of places (like here https://github.com/handsontable/handsontable/issues/11006).

#11

@aleksandra_budnik I get it - what you’re saying makes sense, a visible container is indeed necessary for certain calculations. Up to you. Was just pointing out I had a different and possibly better behavior in 13.0.0.

1 Like