Table with a 100% width and resizable container

[Theldris]

I have just downloaded this plugin and started using it. My layout is a bit complex and cause a bug in your plugin. I have two divs in separated with a splitter (handled by another plugin).

My table is on the left inside a div that has a 100% width, when the splitter resizes I raise a resize.rc event on the $(window) so that the plugin is told that the container div has been resized.

The problem is that the width of the div added by this plugin is set in px, so when trying to get the width of the table if the added div is bigger than the table (with the width of 100%) it correspond to the width of the added div and nothing is changed (there is an overflow).

I modified ResizableColumns.prototype.syncHandleWidths to correct this behaviour so that the plugin doesn't affect the widths of the elements around it by adding display: none before calculating the width.

return this.$handleContainer
    .width(this.$table.width())
    .find('.rc-handle').each((function (_this)

becomes

return this.$handleContainer
    .css('display', 'none')
    .width(this.$table.width())
    .css('display', '')
    .find('.rc-handle').each((function (_this) {

I don't know if I explained the problem correctly but I hope this will allow you to improve the code a little :)

[Craga89]

Can you create a reduced case test for this on codepen or jsfiddle please? Just so I can see what's happening exactly!