Table not maintaning width

Tags: #<Tag:0x00007f8b2b14d260>
#1

I am having a odd problem trying to keep the width of a table 100% of it’s parent. It has something to do with the column formatting but I can’t seem to figure it out,

Take this fiddle for example. Enter a number in the “Increase %” column and you will see the table slightly shrink. I want the table to always maintain 100% width. How do I achieve that?

handsontable_width_issue.png1283×827 78.2 KB

#2

Hi @jpeszleny

it looks like the logic of afterChange changes the width of the columns. It might be a result of data changes, where the columns haven’t been able to rebuild the table correctly.

#3

Ok, but how do I fix it? What is the best way to do a calculation for a cell? I am having a hard time finding things like this in the online documentation.

#4

Hey @jpeszleny

I’m waiting for the opinion of our developer. I’ve tried the recalculateAllColumnsWidth but it did not help. I’ll update you as soon as I get any information.

#5

Thanks @aleksandra_budnik

If I put the recalculateAllColumnsWidth right after the first time I use setDataAtCell, the table width doesn’t change. Check this fiddle out.

#6

Great! I’m happy that it worked for you. It looks like it was a matter of calling the methods in the right order.

#7

Opps! I actually had a an error that was stopping the code from working. The error still persists unfortunately.

#8

I have asked our developer to investigate the code.

#9

Can I ask you to record it (with a console opened). I would like to check how it works for you.

Also please share your browser/system details.

#10

Here’s a quick video showing the problem in action. I just want the table to maintain 100% width and as you can see in the video, something weird is happening.

I am using the latest version of Chrome.

Chrome.PNG701×451 5.55 KB

#11

So this is exactly what I see in the JSFiddle. Thank you for sharing the video and the browser details. I have updated our developer and asked him to investigate this case.

This is his last reply

Error comes from qeHOT.recalculateAllColumnsWidth because hot instance doesn’t have this method. Plugin autoColumnSize has recalculateAllColumnsWidth, so user needs to access it this way var plugin = qeHOT.getPlugin('autoColumnSize'); and then only will he be able to use plugin.recalculateAllColumnsWidth(); method .
Nevertheless, the main bug still occurs - https://jsfiddle.net/g5L79qna/

so we’re still looking if there’s a fix/workaround that doesn’t need core changes.

#12

Hey! I got a new demo https://jsfiddle.net/vmfnh2qd/

If hot container has overflow: hidden; height: 100px; table isn’t changed.

#13

Thanks for clarification about recalculateAllColumnsWidth. That make sense now.

The problem with the hidden overflow is that I need to set a fixed height. In my application, there is always a dynamic number of rows so I would have to calculate the container height. I may try that but if you can find a simpler answer that would be great.

#14

We haven’t managed to make the height fluid. It’s still something that we’d need to change in the core.

#15