Plugin does not work with twitter-bootstrap button dropdown about leaflet-sidebar HOT 18 CLOSED

@vamsiampolu how did you deal with it? Thanks.

from leaflet-sidebar.

Hello,
Like you I'm trying to use leaflet-sidebar and bootstrap dropdown menus inside... but it's not working because of 'stopPropagation' click event used in leaflet-sidebar code... I understand why there is this code in sidebar plugin (prevent to call action for click if it is described for the map when you click on sidebar) but how to use bootstrap drop down menus in that case ?

Regards,
Fabien

from leaflet-sidebar.

I am looking at the same problem here. If you look at this file you can see the dropdowns display fine with the sidevar-v2. See a live example here (click the "iniciar session" dropdown menu), of course, this is not the bootstrap plugin - it's all generated by disqus - but it shows it works.

edit: it's sidebar-v2

from leaflet-sidebar.

This is a fix for showing bootstrap toggles and dropdowns, one needs to do two things:

1. delete line 64 in L.Control.Sidebar.js :

on(content, 'click', stop)

1. The single clicks still go through to the map layer which can prevent the proper functionality in the active sidebar so one need to stop listening to map click event when the sidebar is visible:

sidebar.on('shown', function () {
        map.off('click', yourClickFunction);
    }); 

sidebar.on('hidden', function () {
        map.on('click', yourClickFunction);
    }); 

hth

from leaflet-sidebar.

@adriennn unfortunately now you can't use any clicks on the remaining part of the map that isn't covered by the sidebar...

from leaflet-sidebar.

@Turbo87 Yeah that's the price to pay, but it's good enough for me. I don't need to interact with the map while the sidebar is shown - and anyway, for mobile applications the sidebar covers the map (small screens) so there's no need to actually click on the map :)

I was wondering if you are going to port the plugin to Leaflet 1.0 and perhaps fix this issue? cheers for the plugin!

from leaflet-sidebar.

@adriennn my focus is on https://github.com/Turbo87/sidebar-v2 since I actually use that myself, but if anyone wants to port it I'd be happy to merge it

from leaflet-sidebar.

@Turbo87 that's a pretty good incentive to move to the v2 but from what I tried on jsfiddle the bootstrap dropdown didn't drop? Anyway, I'll have to look at all this when leaflet 1.0 is out so I can see what's what; from what I saw 1.0 is gonna be terrific - but it breaks leaflet-sidebar.

from leaflet-sidebar.

I actually used select instead of the dropdown(which is not always appropriate) but in my case it was. The idea of disabling map clicks just to get the dropdown working is horrible.

from leaflet-sidebar.

@vamsiampolu the bootstrap selects don't work either. One could also stop listening to click events on the map while the sidebar is shown (you could still click on markers and other elements). But if you have a better idea I'm all ears.

from leaflet-sidebar.

@adriennn since you seem to be pretty active: could you prepare a jsfiddle, gist or something for me that demonstrates the problem? maybe I can figure something out. I'm having a hard time believing that this is so problematic ;)

from leaflet-sidebar.

here you go.
thanks for looking into this :-)

from leaflet-sidebar.

@adriennn I've fixed the issue by using the internal _fakeStop() method of leaflet and release it as v0.1.7. If there are still issues with this please let me know.

from leaflet-sidebar.

@Turbo87 well thank you so much sir. It works (and the multiselects display fine as well - not sure why they don't show up nicely in the fiddle). cheers to you.

from leaflet-sidebar.

about the selects: the selects CSS file was missing from the jsfiddle

from leaflet-sidebar.

okay, it seems that now fakeStop is messing with other elements:

.on(content, 'mousedown', fakeStop)

If I select some text inside the sidebar with, it will move the map below as well. So I stick to the full stop for now.

from leaflet-sidebar.

@adriennn could you check if http://turbo87.github.io/leaflet-sidebar/examples/bootstrap.html works for you? I've pushed another patch that should fix your issue.

from leaflet-sidebar.

yes it works fine with using stop. thanks!

from leaflet-sidebar.