Streaming live at 10am (PST)

Is the dropdown really a dropdown? how to make one if not?


#1

working on a prototype web app front end. until now, just put in the dropdown menus without having examined them much. but, now that i'm really taking a look at them - they don't really seem to be dropdown replacements. i'm newish at this, so hopefully i'm wrong?

for instance, when i "run" the preview, or even give the live test a spin, i'm surprised that when i make a selection in the dropdown, nothing happens - it doesn't actually do anything. what i was expecting was that my selection move up to the "top," the disappear from the list of selections (or at least be marked as selected); much like the usual windows or osx drop downs.

when i look through http://v4-alpha.getbootstrap.com/components/dropdowns/ – these seem to work more like "proper" dropdowns, not just a link menu in the dropdown style. the use i'm hoping for is that they work as a replacement for the standard windows or mac dropdown - a list of items, separators perhaps, and selecting one automatically hides the selection, and can send the choice "data" to other objects on the page, like having a D3 graph pull new data.

so, is this even remotely possible with the webflow dropdowns? if not, can i "hack" something together myself, maybe using links and interactions? is there some alternative? maybe using tabs to create a dropdown? seems like a huge oversight to not have fulling functioning dropdowns. like i said, i hope i'm wrong. please, tell me so!


#2

I'm having the same problem. I want the dropdown to close when I click on one of the elements inside the dropdown.


#3

This topic was automatically closed after 60 days. New replies are no longer allowed.


#4

#5

Hi @rps Sorry for the delayed response. Can you share a read-only link and screenshot of the issue?

I'll be standing by for your response! :slight_smile:


#6

hello,
it's a general question, relating the the way dropdowns work in webflow vs what i am expecting (like a dropdown in bootstrap). please, take the time to read my whole post. the 2nd poster seemed to understand.

if you really need an example, i can give you this: http://k3dproto.webflow.io/my-page (note also, that the lower dropdowns overlap wrong, too!) hopefully, it's clear from that what the functionality needs to be, i.e. a dropdown, like they work i think as every basic computer component that is a dropdown (mac, windows... i'm guessing linux). also, another failure is - they go off the page.

so, please, take the time to read the entire post instead of skipping over it - there's a lot in there. below is the read link, but i didn't include it before because it's not necessary.
https://preview.webflow.com/preview/k3dproto?preview=695d70903e58f8e829ae9fc17a918c69


#7

here's another example i just randomly noticed:
www.dtac.co.th/en/home.html

see the dropdowns there under the "postpaid" tab? that's what a dropdown is. is this achievable by any means within webflow? because, that's absolutely what i have to have; a real dropdown. can the current one be modified or enhanced to do this? i don't code, but even some helpful javascript i will try - because, as i said, i have to.


#8

Hi @rps, thanks, you could use the forms Select widget, although at the moment, it is not possible to style all of the drop styles natively in Webflow, you would need to use some custom css in the header of the site.

The select box can be used in a form, or outside of a form, if you hold the alt key while dragging the select box to your page layout.

Does this help?


#9

hmmmm..... i did not know it was possible to style the standard select to the point in what i've shown as examples. my guess is no; pretty sure i tried to go that route before. no way to style the actual popup in that case, either, i believe.

so, back to my 2nd question: is there a way to "fake it" in webflow then? i suppose, in essence it is a micro-modal window. so, i can "recreate" it has a div, with a list of links, and style as i want (maybe even set a max size, with a scrolling overflow?). then use interactions to make it appear.

but, then i guess i'll have to find some kind of javascript somewhere to make the selection move up to the dropdown "button." hopefully, that's something i can handle. any hints for this direction would be appreciated, but will try my best.


#10

Hi @rps, well here is good reading on styling the select input, mileage varies: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

On creating this kind of drop down in Webflow, you certainly can create a dropdown with interactions to make a nice drop down for most html situations, but to have the structure to work like a select widget instead of an html div, that will probably need to be scripted (it sounds like, according to how you wish it to work).

If you were going to fool around with javascript, I would go all in and use the selectmenu from jqueryUI. jQuery is already baked in Webflow, so you just need to add one line of script to load the jQueryUI from the cdn in the head of the site.

Then you can create a selectmenu in jQueryUI and embed the markup in an embed widget on the page: https://jqueryui.com/selectmenu/

Also might be of some interest: https://jqueryui.com/controlgroup/

If you wanted to create a boostrap feel, you might check out: http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/

I hope this helps to give some ideas. Let me know if any questions.


#11

wow, in all the searching i've done on this topic 1) i never chanced upon that jquery selectmenu, and 2) i didn't know jQuery itself is already there. so, double plus bonus there. thanks! instead being bewildered, i feel like i know exactly what path to go down. thanks for taking the time to deal with this.


#12