ReactDataGrid width not respecting container padding

[ZephD]

I have a bootstrap Grid -> Row -> Col, with my ReactDataGrid inside.

The ReactDataGrid is larger than the column width by the sum of the padding on the sides.

Calls to .updateMetrics() do not fix the issue.

Probably due to using box-sizing: border-box in the css.

Here you can see the grid overflowing it's container:

Here is the container (bootstrap col). Notice the overflow is the sum of the side padding (green)

[ZephD]

Workaround: Wrap the ReactDataGrid in a div: <div><ReactDataGrid /></div>
(the new div does not have padding, but fills the bootstrap column)

[vijayrajaram]

Wrapping ReactDataGrid inside another div doesn't seem to help
`

    <div className="col-md-12">
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={rowGetter}
          rowsCount={rows.length}
          minHeight={375}/>
      </div>
    </div>
  </div>

`

[jsobus-neurosys]

Addition div gives no results, calling updateMetrics() after some time (not 0) makes grid to stay inside container. But then we got flickering effect because grid is resizing itself during init. This error exist even on demo page of this grid. Calculation is valid after first resize when the updateMetrics is called.

[lavor]

@jsobus-neurosys Try to wrap grid in absolute positioned full-width div, see: #295 (comment)

[jsobus-neurosys]

@lavor Good idea but in my case still the same. Calculation is done wrong for the first time, and need to resize widow to make it look well. My view is complex one with many dynamic items which makes me calling updateMetrics very often because grid itself is not updating its layout.

[jsobus-neurosys]

I found something, all sizing is ok now, problem was then the main container got its own scroll. I mean this scroll appears dynamically after grid is loaded. Problem was that scroll showing/hidding is not calling resize event. The fix for this can be done using that sham: https://gist.github.com/AdamMcCormick/d5f718d2e9569acdf7def25e8266bb2a

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.