St-aggrid horizontal scroll bar disappears when I define a height

đŸ§© Custom Components
1

Has anyone had success with forcing a horizontal scrollbar / slider and a vertical scroll bar? I have a grid with many rows and columns that I want to display. If I call st_aggrid.AgGrid() with no ‘height=’ argument, the grid has a horizontal scroll bar, but no vertical scroll bar, so it makes my streamlit page overly large. If I define the height, (say height=400), then the vertical scrollbar appears and the grid is shorter, but then my horizontal scrollbar disappears and I can’t scroll to view all the columns.

I’ve tried forcing the scrollbar using the grid options builder, but to no avail.
Any Ideas?
Is this a bug or user error?

    go_builder = st_aggrid.GridOptionsBuilder.from_dataframe(df)
    go_builder.configure_grid_options(alwaysShowHorizontalScroll = True)
    go = go_builder.build()
    st_aggrid.AgGrid(df,gridOptions=go, theme='streamlit', height=400)
1 Like
2

@PablocFonseca any thoughts on how to resolve this? I’ve tried for hours with no luck

I’ve resulted to using pagination for now but would prefer not to. And also still have an issue where I want to show one row and there is no horizontal scroll bar to show or I have to have unnessary white space.

3

Hey @Dominick_Crisci and @PabloCaSan , Any solutions?

1 Like
4

Also interested in this. @Dominick_Crisci @Parth_Chokhra have you found any solutions?

1 Like
5

It’s a weird work around that still doesn’t make much sense to me, but I’ve found a way to have both horizontal and vertical scroll bars:

go_builder = st_aggrid.GridOptionsBuilder.from_dataframe(df)
go_builder.configure_grid_options(alwaysShowHorizontalScroll=True, enableRangeSelection=True, pagination=True, paginationPageSize=10000, domLayout='normal')

agdf = st_aggrid.AgGrid(df, gridOptions=go, theme='streamlit', height=500)

I found that not defining a height results in the st_agrrid.AgGrid object automatically defining the height with domLayout="autoHeight" - (see JavaScript Data Grid: Grid Size) - this is probably not really desired in this use case.

I use the .configure_grid_options() method, with the pagination arguments defined. I still don’t understand why, but this is the only way I can get both scrollbars to work. Even more strange is that if I get both scrollbars to display, I don’t actually get the tools to cycle through the pages - so I just define an exorbitantly large page amount with the paginationPageSize argument such that my whole dataframe is displayed on one ‘page’ (though the user won’t know it’s a 'page).
In short if I use pagination with a defined height (with height=___ in the .AgGrid constructor) and alwaysShowHorizontalScroll=True (in the .configure_grid_options method), I can get both the vertical and horizontal scroll bars, but pages aren’t actually displayed (just the first page). If I don’t use pagination, I can only get one scroll bar or the other.

1 Like
6

Hey @Bsf9 , I downgraded the st-aggrid version and problem is sorted.

streamlit-aggrid==0.3.3

This version works fine.

1 Like
7

I will have to check my version tomorrow. I would prefer to not have to downgrade as I wouldn’t want to sacrifice any additional features/bug fixes, etc.

If anyone has a fix on the most updated version, please let me know!

1 Like
8

This was the only solution that worked for me

1 Like
9

work for me if downgrade to 0.3.3
edit : but 0.3.3 dont work on the cloud with last streamlit version
So happy to try to use AGgrid again 


i just wanted filter option maybe in next version of streamlit dataframe

1 Like
10

Bottom sliderThe issue has been resolved here, and the complete code is as follows👇

st_aggrid.AgGrid(
    df,
    gridOptions=builder.build(),
    custom_css={
        "#gridToolBar": {
            "padding-bottom": "0px !important",
        }
    }
)
4 Likes
11

Thanks! It solved my problem! so happy!

1 Like
12

Thanks, this worked for me as well.

1 Like
13

Thanks, it solved it for me as well.

1 Like
14

The solution from ikdd-ao worked, however!

The reason why we cannot see the scroll bar is because it is hidden, not because it is not there. So adjusting the padding, results in moving the grid to the buttom. This reveals the scroll bar, however hides whatever is in your header. In my case, it hid the quickfilter in the header.

So inspecting the app, I found the container and got to reveal both the filter in the header and the scroll bar simultaneously.

Note that the padding-bottom at 30px is the height of the quickfilter in the head. This should be the difference between the “height” in the AgGrid() and the “height” in the “div.ag-root.ag-unselectable.ag-layout-normal”.

As you see, padding-bottom = 30 px, AgGrid() height = 780 px, and ag.leyout-normal height = 750 px.

Hope this works for you as well.

                    grid_response = AgGrid(
                        df, 
                        gridOptions=gridOptions,
                        custom_css={
                            "#gridToolBar": {
                                "padding-bottom": "30px !important",
                            },
                            "div.ag-root.ag-unselectable.ag-layout-normal": {
                                "height": "750px !important"
                            }                                
                        },                            
                        height= 780, 
                        enable_quicksearch = True
2 Likes