Column width issue

Tags: #<Tag:0x00007f8b1e157678>

In my handsontable, I’ve given colWidth like colWidth=“100,50,100,50,100,50,100,50”. If data is present in columns it’ll taking that assigned width like 100,50…if data is not present in the column that colWidth is affecting. Please help me.

Hey @krishnappa

Can I ask you to fill this demo https://jsfiddle.net/bgepLv4y/ with remaining logic? I do not know how to replicate the issue

Sorry aleksandra… i found the where is the exact issue…
In my application i’m using the nested header it contains 3 rows,
In second row data coming dynamically, If the data is present it’ll take correct width and If the data is not there in header, automatically column width is reduced.

My question is how to fix the nested header width.Please help me.

If the data is there are not, width of the column should be fixed

https://jsfiddle.net/joshenglish/3ec1tq3z/

In this example, If we remove header value like ‘LONGER LABEL DOES NOT RESIZE’ to ‘LONGER’,
The column width is automatically reduced, It should not be reduced. It should be fixed, Please help.

Hey @krishnappa

how you ‘reduce the columns header’? I do not see any context menu enabled. Can you share a bug scenario?

ps. it is a version 1.15.1. Currently we are on 6.2.2. Please check if this demo works as expected https://jsfiddle.net/yewg2s5x/

1 Like

My requirement is, How to give a width to nested headers,

https://jsfiddle.net/yewg2s5x/2
In this link header value is static, In my case header value is dynamic, some time value length is small or large. In that case width of the column should not be changed it should be fixed,
My be the header value is 100 or 200 character, it’s width should not be alter.
see the below example…
colWidths: [15, 15, 90, 90, 90, 90, 90, 90, 90, 90],

Hear we are giving first column width is 15, In nested header
nestedHeaders: [
[‘A’, {
label: ‘B’,
colspan: 8
}, ‘C’],
[‘LONGER LABELrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr’, ‘O’, ‘LONGER LABEL DOES NOT RESIZE’, ‘Q’, ‘LONGER LABEL DOES NOT RESIZE’, ‘S’, ‘LONGER LABEL DOES NOT RESIZE’, ‘U’, ‘V’, ‘W’]
],

Here first column value is more then 15 characters,
My question is, we can pass any length of value, that column width should not be increased, it’ll may increase cell height no problem.

In header value is 1 or 100 character, width of the column should not be increased and decreased it should be fixed.

Can you please resend the demo? I get 404.

https://jsfiddle.net/yewg2s5x/2/

https://jsfiddle.net/yewg2s5x/3/
In this example first column width is decreasing, In colWidth first column size is 15, it should be 15, width should not be dependent on value,
If value contains once character it’s width is decreasing and if value contains 100 character it’s increasing. it should not happen it should be static.Please help me to fix it.

If you wish to have the header title hidden to fit the colWidths values you need to set the afterGetColHeader method, like here https://jsfiddle.net/3pwx9f0j/ when I use it for the 3rd column.

Is that what you were looking for?

Thank you very much, i’m so happy

Is there any handsontable property like colHeaderWidth.
No problem if it’s not there. Thank u for your patience

we have colWidths for the width of the columns, rowHeights for a height of the row and rowHeaderWidth for the width of a row header.

Thanks for resolving the above issue, One more question, If i click on column header it’ll selecting whole column, For that i’ve tried selectionMode=“single” and beforeOnCellMouseDown, Both are not working in my
application, Is there any other approach to resolving this issue.

Hey @krishnappa

I do not have any demo that does it, but I have one that will return a header click http://jsfiddle.net/e1kgpbx7/ hope it helps.

http://jsfiddle.net/e1kgpbx7/1/
In this example every thing is working fine, In my application is not working…it’s ok, I’m happy with your response

Maybe some other methods are blocking the code. Can you share a JSFiddle with your settings?

yes, the problem in settings. thank you.