Question

When a Slickgrid is added to a table-cell styled div, the grid becomes excessively wide unless a maximum width is specified for that div. The grid also seems to gain a phantom column to the right.

Is it possible to cause Slickgrid to only occupy necessary space in that type of layout?

http://jsfiddle.net/ericjohannsen/uMQH2/3/

UPDATE

I noticed the following HTML generated

<div class="slick-header-columns" style="left: -1000px; width: 2978px;" unselectable="on">

The width is being explicitly set to a value that is way too large, even given that the left if offset -1000px.

Answer 1

I’m still hoping for a proper solution, but in the mean time I was able to work around the problem by including the following code after rendering the grid

    grid.render();

    // Hack to fix grid width issue http://stackoverflow.com/q/12032796/141172 
    var cols = grid.getColumns();
    var numCols = cols.length;
    var gridW = 0;
    for (var i=0; i<numCols; i++) {
        gridW += cols[i].width;
    }

    $('#gc').width(gridW); // gc is the ID of the div used for SlickGrid