Freeze one row of Dash using DashBootstrap

Dash Python
1

Hi all,

I’m making a Dash and it uses just one filter for all of graphs in my Dashboard and I’m putting this filter on top of Dash. So every time I want to filter I have to scroll up to filter again. I want to ask is there anyway to freeze/ fix one Row of Dash like freeze function in Microsoft Excel.

Thank you.

2

Hello @hoatran,

For dash table, you are looking for fixed_rows.

If not, could you please provide an MRE?

3

Thank for your reply, it’s not dash table but page.

It’s something as below:

layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            ThemeSwitchAIO(aio_id="theme", themes=[dbc.themes.LUX, dbc.themes.CYBORG])
        ], xs=6, lg=6, md=6, style={'text-align': 'left'}),
        dbc.Col([
            dbc.DropdownMenu(
                [dbc.RadioItems(
                    options=[
                        {"label": "a", "value": 'a},
                        {"label": "b", "value": "b"},
                        {"label": 'c', "value": 'c'},
                        {"label": 'd', "value": d'}
                    ],
                    value='a',
                    id="radioitems-input",
                    inline=True,
                ),
                ],
                label="Type",
                size="sm"
            )
        ], xs=6, lg=6, md=6, style={'text-align': 'right'})
    ], className='p-2 align-items-center'),
    dbc.Row([
        dbc.Col([
        ])
    ], className='p-2 align-items-center')
......

I will use value from this dropdown to return charts based on it, because page is too long but uses just one filter so that I have to scroll up to filter again.

4

Ah. Ok.

Use css position: sticky.

5

Can you explain how to put css in this case please?

6

Place it in the style of whichever element you want to stay at the top.

7

Hmm maybe I didn’t explain clearly, it’s not that I want to fix it there but I want it to be frozen, when I move it it won’t be lost, even if I scroll to the bottom of the page I can still filter without dragging the page up.
Something like freeze function in Excel, header will be frozen and I can scroll up or scroll down:

8

When you use sticky, it stays at the top if you scroll down.

Go to that in the W3 schools.

9

Hm, it worked with you link but when add to my code, nothing changed.

    dbc.Row([
        dbc.Col([
            ThemeSwitchAIO(aio_id="theme", themes=[dbc.themes.LUX, dbc.themes.CYBORG])
        ], xs=6, lg=6, md=6, style={'text-align': 'left'}),
        dbc.Col([
            dbc.DropdownMenu(
                [dbc.RadioItems(
                    options=[
                        {"label": "gender", "value": 'gender'},
                        {"label": "SeniorCitizen", "value": "SeniorCitizen"},
                        {"label": 'Partner', "value": 'Partner'},
                        {"label": 'Dependents', "value": 'Dependents'}
                    ],
                    value='gender',
                    id="radioitems-input",
                    inline=True,
                ),
                ],
                label="Customer Type",
                size="sm"
            )
        ], xs=6, lg=6, md=6, style={'text-align': 'right'})
    ], className='p-2 align-items-center', style={'position': 'sticky'}),
10

@hoatran,

I think you also need to add a top argument. Then I think it will work.

To look the best, I’d place it at top 0.

style={‘position’:’sticky’,’top’:’0’}

Or, since you are using bootstrap. Check here:

12

Thank for your suggestion, use ‘sticky-top’ in className and it worked.