React-data-grid: ReactDataGrid width not respecting container padding
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
All 7 comments
Workaround: Wrap the ReactDataGrid in a div: <div><ReactDataGrid /></div>
(the new div does not have padding, but fills the bootstrap column)
ZephD
on 14 Feb 2017
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>
`
vijayrajaram
on 17 Feb 2017
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.
jsobus-neurosys
on 15 Sep 2017
@jsobus-neurosys Try to wrap grid in absolute positioned full-width div, see: https://github.com/adazzle/react-data-grid/issues/295#issuecomment-332212132
lavor
on 26 Sep 2017
@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
on 2 Oct 2017
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
jsobus-neurosys
on 8 Nov 2017
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.
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 12 Jul 2018
Related issues
jmahony
路
4Comments
Thilagm
路
3Comments
oliverwatkins
路
4Comments
JordanBonitatis
路
4Comments
daniel1943
路
3Comments
Most helpful comment
Workaround: Wrap the ReactDataGrid in a div:
<div><ReactDataGrid /></div>(the new div does not have padding, but fills the bootstrap column)