Streaming live at 10am (PST)

Help creating bespoke dropdowns

Hi everyone,

I’m looking to create dropdowns similar to how apple do their compare table dropdowns. https://www.apple.com/iphone/compare

I don’t know how to make the dropdown scrollable and appear above the the dropdown itself, instead of the standard dropdown. If anyone has any help / guidance on this, that would be amazing!

The page in question is https://mattress-unboxed.webflow.io/mattress-comparison

Read Only link below too.

Thank you.


Here is my public share link: LINK
(how to access public share link)

Hi there @Esteban - that’s actually the default appearance of dropdowns in Safari. For example, for me in Chrome the same dropdown looks like this. So if you just leave a dropdown to use native appearance, it will look exactly like on the Apple website when using the Safari browser.

However, if you want to style it yourself to ensure it looks the same across all browsers, you need to style your Dropdown List element. You can make it scrollable if you set it’s height to a fixed amount and then set Overflow either to Scroll (will display a scrollbar always) or to Auto (will display scrollbar only if your content overflows).

As for appearing above the dropdown - I wouldn’t recommend it, but you can always set a negative top margin to move it above.

Hi @Alex_Tokmakchiev Thank you for this. I will give it whirl. Actually, having it appear above the select element is probably a bad idea in terms of UX & Accessibility - good shout!

It definitely is, since many users click on the dropdown itself to close it, instead of clicking anywhere outside of it.

If you need any more help - just shout! :facepunch:

1 Like

Hey dude, I have 2 things that I need to tackle going forward.

  1. How do I dynamically link the items in the dropdown to the actual comparison table collection lists? Not binding (I’ve done that).

Initially, I tested it with buttons (before doing it with a dropdown) and added several collection lists to the table wrapper, with overflow hidden on the table. then I added an interaction to show / hide a collection list based on brand name, and that was ok-ish, but not the correct way.

Is there a way to do this with the dropdown? Do I need custom code? And is there a better solution than adding several collection lists to the table, because as the client adds more brands, these will not automatically add to the table. Hope that makes sense.

  1. Let’s say I get a solution to number 1 above, how do I then make sure that a user cannot select the same brand in all 3 dropdowns? It basically needs to only allow them to choose a brand once, in one of the dropdowns. For reference, there will only be max 3 columns too.

Thank you.

Hey @webdev would you be able to provide any advice on the above comment. Thank you!

@WebDev_Brandon Hey dude, do you have any experience with this? I’m struggling to get the solution by myself.

@Esteban This is where a Front-end developer would happen. There is more code work at foot then I know.

Good luck.