Grid Header Columns get misaligned After a Grid Resize

[b-giavotto]

If a grid is created from a div with width: 100%, then after a browser resize (or whatever will change the grid size), if a header rows is configured with this code:

[code] grid.onHeaderRowCellRendered.subscribe(function (e, args) { if (args.column.searchable) { $(args.node).empty(); $("< i n put type='text' style='width:100%; height:20px; padding:0;' >") .data("columnId", args.column.id) .val(columnFilters[args.column.id]) .appendTo(args.node); } }); [/code]

then dragging the horizontal grid scroll bar, towards the end, does correctly scroll all the columns in grid with exception of column headers row which get misaligned

Steps to reproduce the issue: Create a Grid with at least 10 columns with increasing width, larger than the grid size. The size of the Grid should change when you do a browser viewport resize Cause the viewport to resize Scroll right using the horiz. scroll bar At some point the header cols stops scrolling togheter with all the others columns and get misaligned.

[ghiscoding]

If you find the issue you can always submit a Pull Request, but it's probably better to simply use the dedicated auto-resize plugin, see this Example

[ghiscoding]

$("< i n put type='text' style='width:100%;
    height:20px;
    padding:0;' >")

This piece of CSS code that you added should be omitted and is the reason why the header doesn't resize properly. Since you're causing your own issue, I don't think there's anything for us to fix.

See this piece of code for a demo of filter inputs, there's no CSS changes in here, and you shouldn't add any

https://github.com/6pac/SlickGrid/blob/21fe9416b293e4f921657857971f0615acd36c0c/examples/example-header-row.html#L122-L128

in that same example demo, the CSS related to these filter inputs are defined CSS and that is what works properly

https://github.com/6pac/SlickGrid/blob/21fe9416b293e4f921657857971f0615acd36c0c/examples/example-header-row.html#L8-L24