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.
Hello @hoatran ,
For dash table, you are looking for fixed_rows.
How to set the height of the DataTable. Examples include how to set the height with vertical scroll, pagination, virtualization, and fixed headers.
If not, could you please provide an MRE?
1 Like
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.
Ah. Ok.
Use css position: sticky
.
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
1 Like
Can you explain how to put css in this case please?
Place it in the style of whichever element you want to stay at the top.
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:
When you use sticky, it stays at the top if you scroll down.
Go to that in the W3 schools.
1 Like
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'}),
@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:
1 Like
Thank for your suggestion, use ‘sticky-top’ in className and it worked.
1 Like