dynamic color on placeholder !! ouiiiiiiiiiiiiiiii
always a pain to try to match with those default colors when need to “fake” placeholder lol
One way to have explicit control over nearly every aspect of a dropdown’s appearance and behavior is to build your own using Bubble elements. Here’s an example of a couple pure-Bubble UI elements.
Of course, not being a true “input”, the custom dropdown isn’t tab-able and can’t be reset using Bubble’s Reset relevant inputs action, but depending on your use case, it might be a viable option if the aim is something that looks and behaves identically across devices.
Thanks @sudsy for your suggestion.
Does this approach work for a long list of items that requires scrolling to view all items in the list?
I tried using the “Nice” dropdown plugin by @momen, which is a great plugin – except it did not work for my app, because my app has long lists (20-40 items) – with Nice the list continues off the page and is inaccessible / un-scrollable.
In contrast, native iOS/Android dropdowns allow scrolling for long lists. So, my app uses the native dropdown instead of Nice. I would rather use Nice (which also works well in the Tesla browser) but the lack of scrolling is a fatal flaw for my app.
Absolutely. Check it again; I just added more items. It’s just an RG inside a GroupFocus, so you can specify a fixed height for the GF so the RG scrolls within.
The only other consideration I’ve come across is that the popup list doesn’t automatically reposition itself, which is really only an issue if the dropdown is at the very bottom of the page. In that case, you must allow sufficient space (margin or padding) for the list to remain accessible.
Thanks @sudsy, looks good! Would you please share the Editor version of your test app?
Hello @greg18 ,
Yes I got your issue and you are right the plugin is not ready for scrolling functionality, I added this option to my backlog to have a max height dropdown so the list is scrolling inside it
Hey,
Does this breaking change
affects live apps that have the old responsive engine?
Thanks in advance
I cannot at this time, but here’s the simple element hierarchy and GroupFocus config. The WF logic is pretty straightforward - save the selected item to a custom state when list item is clicked. (The reusable itself is set to element type Group.)
The input placeholder transition is so elegant. Are you able to share how you did this using bubble only elements, or point me in the right direction to do it myself?
Thanks, @_james. That input was designed to mimic the “outlined” variant of text fields in Google’s Material Design UI system.
It makes use of Bubble’s recently introduced transition capabilities. Lots of “eye candy” (or “UI candy”) is now possible that wasn’t previously. This example showcases a few possibilities.
How did i miss this? wow i must’ve been busy! Thanks guys, can’t wait to try it out
My users are complaining that they can’t use dropdowns now on iOS! I emulated iOS on Safari, and it worked fine, but an actual iPhone apparently is apparently having issues.
Ever since this dropped, I’ve been having a mountain of issues. in iOS, and safari desktop my placeholders and selected values are not appearing.
left is safari, right is firefox. this is driving me insane.
@luc.simp, are you using an up-to-date version of Safari?
Yes, across multiple devices. Behaviour isn’t even consistent on individual devices.
@momen Please let me know when you have updated Nice Dropdown plugin to have scrolling functionality – that would be fantastic
Hello @greg18 , I just updated it , check and let me know
Great I will try it out shortly and let you know how it goes.
I really appreciate you building and maintaining this plugin, it is really good!
Hi @sudsy I’m going to try to build a custom dropdown per your lovely example
Could you please provide any more context on how to do it beyond your previous screenshot?
(I tried using the Buildshare extension but it would not open)
Thanks so much for any further help you can provide
Hi @greg18,
It would be easier to provide assistance if you could describe what you’ve already tried and what’s tripping you up.
Maybe start another thread in the new responsive engine category, and I’m sure someone will jump in.
(And yeah, sorry about the unavailability of Buildshare, but it will be making a comeback soon. )