Streaming live at 10am (PST)

Checkbox inside a DropDown


#1

Can i add Checkbox inside a drop down ?


#2

Yes, a dropdown list being a DIV, you can add anything inside it.


#3

how to have multiple dropdown ??
can you please show me.


#4

from the Add menu, drag a dropdown, element in a navbar, for example. Then select it, and in the style tab click on open. Then you can drag another dropdown inside it. or a form with a checkbox, or a video, anything.


#5

How can i get this type of dropdown with multiple checkbox selection??


#6

Aaaaah a dropdown list, not a dropdown menu item. Sorry.

No, that will require custom code.


#7

And how can i can custom code ? from where i can add custom code?


#8

Possible... but difficult to do
- as it's not native Webflow.

Requires JS / JQuery (Custom Code)
and a Form Element...
(you have to add a Checkbox to an existing form element)
- which I've always had an issue with
-- because sometimes I simply need to add a checkbox
-- and manage it via JS/JQuery.

I'm curious though...
- does the Drop Down contain other values ?
- Normal Drop Downs would... but I don't know your specs.

I'm guessing the functionality you need (base solely on the image you provided):

Dropdown List would contain 2 values.
A: Analysis, Linear Algebra, Discrete Mathemetics
and
B: Introduction to Programming, Automata Theory, Complexity Theory

If the use selects A
- a SubList containing checkboxes for (Mathematics: Analysis, Linear Algebra, Discrete Mathematics)
- would display under it.

If the use selects B
- a SubList containing checkboxes for (Introduction to Programming, Automata Theory, Complexity Theory)
- would display under it.

If you were to modify your requirements to use a Tab element instead...
- you might see an easier route to follow and more likely keep your website as vanilla webflow.

ie: no custom code.


#9

Is this "kinda what you are looking for" ?

http://group-check-box-drop-down.webflow.io/


#10

@Revolution would you mind sharing the preview link for that option?

Cheers,


#11

sure. here it is.

https://preview.webflow.com/preview/group-check-box-drop-down?preview=198959d28b360afa970a1441ab1e9883


#12

Hey Thanks for that Preview. Helped me alot.
Thank you very much.


#13

Not a problem. Glad I could help.

I actually just modified the code.

In the previous example...
- positions of the group divs were initially set to absolute
- and they had a z-index of 1000 (to place them above the other elements)
- this makes it a pain in the rear to update / change the contained elements.

So... to make it easier
- I added code to programmatically change the position to absolute at run-time

(Using the Designer)... When you don't set the position... you also lose access to the z-index.

So... programmatically - I also needed to set the z-index
- but since all the groups are based on a class... I changed the class instead.

EDIT: There's also an interaction on each Group... which hides the group on mouseExit.
- this can be a little irritating as viewers may not always understand mouse movement
- and the data / info could "all-the-sudden-disappear".

It might be better to move the interaction to the parent container
- to allow more of buffer around each group
- or just a close option in the individual group container


#14

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