How can I make dcc.Dropdown sticky on the top of the screen on mobile?

Hi All,

I have a filter panel on my dash app that makes use of multiple dropdowns, on mobile this is the first thing the user scrolls past, the app is quite big and they will need to scroll all the way back to the top to change the one filter constantly.

I want to make the specific filter stick to the top of the screen,

I have tried Position: sticky, top:0 however this only sticks the specific filter until the end of its containing dbc.Col()

Any ideas to make a single dropdown that forms part of a larger dbc.Row() stick to the top of a screen on mobile would be much appreciated!

Hi @DrSmith69

Why don’t use navbar with a dropdown in it and fix it on top: :thinking:

1 Like

hmmm… I am starting to see a solution with that actually without changing my app layout too much… I can create 2 elements, one that sits in the NavBar stuck to the top or bottom of the screen and the current one.

I can then hide the sticky one until one of my callbacks is used where I will then show the sticky Navbar and hide the one in my filter list. This will almost give it a snap-to-screen feel once it has been selected the first time.

Thanks for the idea, going to have a look at this

So got it working making use of @Eduardo suggestion - I did the following:

  1. Created a duplicate element and set the className to hide - set to Display: None in css
  2. Created further two classes I names hide_mobile and show_mobile and in my css folder I placed 2 portions of each having opposite effects, under the mobile portion of my CSS hide_mobile hides and show_mobile shows and the opposite occurs on the desktop portion of my CSS
  3. Linked all these classes to varying callbacks to hide my current filter dropdown when an action occurs on mobile and show the Navbar with the containing filter dropdown which is set to fixed: top in the Navbar properties.

This gives me the desired result - I did have to do some serious changes to my callbacks but that is my app specific issues that were affected by this change.