How to prevent random horizontal scroll bars on AG Grid?

I’m seeing a strange behavior with the Dash AG Grid:

My rows all look good upon first render, but as i dynamically add other controls below, I get horizontal scrollbars (see screenshot).

Is there a simple way to control this?

Hello @zack_nc,

This sounds like a styling issue, without seeing what else is going on in your code, it’s hard to say what is happening.

I get that styling can be hard to pin down, but just to be clear, this is as simple as: when I select a row, it creates a scrollbar - implying that something in the built-in styling of the “make it appear selected” is causing the width/scrolling to change.

My only styling is as follows:

dashGridOptions = {
“undoRedoCellEditing”: True,
“rowSelection”: “single”,
“columnTypes”: columnTypes,
“tooltipShowDelay”: 400,
“domLayout”: "autoHeight

# Dash tables are very slow when using fixed rows or columns, so only do that when necessary
return dag.AgGrid(
    style={'height': '100%'}

Beyond that, I’m using bootstrap and the grid sits inside of a row.

Also noteworthy: this happens on Chrome but NOT on firefox.

Instead of sizeToFit, try using flex in the columnDefs.

There might be something happening with the styling of that. And the cells make a certain width when it is sizeToFit.

Removing sizeToFit did the trick.


1 Like