Problem with autoHeight in ag-grid?

Dash Python
1

Hello,

I think there is a problem with autoHeight in ag-grid if the grid is above a certain size.
Using the example in the docs and tweaking it a bit:

"""
Grid size
"""

import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)

columnDefs = [{"field": "make"}, {"field": "model"}, {"field": "price"}]

data = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
] * 5

app.layout = html.Div(
    [
        dcc.Markdown("Default grid size"),
        dag.AgGrid(
            id="default-grid-size-example",
            columnDefs=columnDefs,
            rowData=data,
            columnSize="sizeToFit",
            dashGridOptions={"domLayout": "autoHeight"},
        ),
        dcc.Markdown("Grid size with auto height", style={"marginTop": 30}),
        dag.AgGrid(
            id="auto-height-example",
            columnDefs=columnDefs,
            rowData=data,
            columnSize="sizeToFit",
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=True)

all i’ve done here is making the data 5 times bigger and making the autoHeight grid the first one instead of the second one.
I then get the second table displaying in the middle of the first one - and the markdown text has disappeared, eaten by the first table.

2

Hi @mc2pezwb

This is because the grid has a default height set to 400px. Adding this to the first grid, should fix the issue:

 style={"height": "auto"}
2 Likes
3

@AnnMarieW Perfect, that did fix it. I did not find anything about this in the docs, did I miss it? Is it an intended behaviour?

4

In the Grid Size section of the docs it mentions the default height, but I agree that we should include how to update the style prop if the grid is taller than 400px when using
dashGridOptions={"domLayout": "autoHeight"},

5

ok cool, thank you

1 Like