How to prevent random horizontal scroll bars on AG Grid?

Dash Python
1

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?

debug6
debug61700×229 10.5 KB

2

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.

3

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(
    id=tableid,
    columnDefs=columns,
    rowData=table,
    columnSize="sizeToFit",
    defaultColDef=defaultColDef,
    dashGridOptions=dashGridOptions,
    className="ag-theme-balham",
    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.

debug8
debug83788×693 69.6 KB

debug7
debug73829×671 68.8 KB

4

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.

5

Removing sizeToFit did the trick.

Thanks!

1 Like