2nd level dropdown containing input field - Problem

[bennyhagen (Bence Lőcsei)]

Hi,

I can not make the project public because of my NDA, but it’s easy to explain, I include picures too.

I have a dropdown, that includes another dropdown. The second one has input fields. If I click on the input fields, it closes the whole stack.

As I understand this is because it’s regarded as clicking outside of the parent element which closes it (and the second level dropdown with it of course).

Is there any way to override this? (custom code, other solution?)

First dropdown:

Second level dropdown:

So if I click on any element here the whole thing goes away.

Thanks,

[AlexN (Alex Nichol)]

Would it be possible to make an example project and share that read only link?

[Revolution]

That is a nice looking drop you have there.

Would love to see it when you’re done.

Have you tried placing the dropdownlist inside another div / wrapper.

Not sure if it will solve the issue…

but I’ve been working on a megamenu that does something similar…
to what you appear to be doing…
except with images, checkboxes and input fields.

I think either @vincent or @danro has something similar as well.

[bennyhagen (Bence Lőcsei)]

Okay, here. I have to solve this. It’s on the “Sales” page.
https://webflow.com/website/evosaleposv2b

[Revolution]

(for the time being… I’d remove the logo from login / main pages and the copyright from all 3 pages).

This is a developer issue… not really a designer question.

I’m guessing this is will be a front-end for a php / ajax application ?

Have you tried JQuery:stopPropagation

I was working on a project and encountered almost the same exact problem.

I was following the JQuery:stopPropagation route… but then the client ran out of money and disappeared.

So I pulled the plug on the project and never got an answer to this issue.

I never got fully paid either… lost about 120 hours of $ with that one because the client shutdown and never paid the invoices.

Webflow doesn’t support jquery… but I would bet Vlad could fix this.

$( “theElement” ).click(function( event ) {
event.stopPropagation();
// Continue doing other things while event is stopped
});

@callmevlad, @jwburkhard, @bart

[bennyhagen (Bence Lőcsei)]

Thanks for the input! I’m going to pass this on to the developers and see what they think of it.

I’m sorry for your bad experience. Though I havn’t had a problem with getting paid for quite a while now, I usually send an invoice for every $500 - $1000 to keep the risk low. If there is a fixed budget I set milestines for chunks of approximately this value. I find this to be working better then any contract.

[Waldo (Waldo Broodrÿk)]

That looks beautiful! @bennyhagen

You could always go the custom route and just make a div with nested divs and interactions to get the drop down to work just how you want it to

Takes a bit more work but then you’ll get exactly what you want.

[bennyhagen (Bence Lőcsei)]

Hi Waldo,

My problem with interactions is that there seems to be no way of reproducing the property of a dropdown menu, where it closes if you click outside of it’s area. Without this this the opened panels hang around until the user closes them manually, which is a huge usability issue.

[Waldo (Waldo Broodrÿk)]

Just put each drop down content menu, in a parent div which is transparent, but takes up the full view port (100vh and 100vw) and put an interaction on it to display none or whatever interaction you want when clicked kind of like what is done for custom light boxes. If you search for custom light boxes on the forum, you’ll see how it’s done let me know if you need any help finding it or have any additional questions @bennyhagen excited to see the final product if you can show us then

[bennyhagen (Bence Lőcsei)]

I just received word that the solution @Revolution proposed actually works perfectly.

Thanks a lot dude you saved me a lot of trouble!

@Waldo_Broodryk thanks a lot for the info though, I will definitely use this in future projects!