I'm using OpenLayers 3 to make a map interface. Selecting a vector feature brings up a small control panel (extending ol.control.Control
). I'm trying to add multiple tabs to this control panel using Twitter Bootstrap, but I'm finding that the events which are needed to trigger the tab switch aren't making it to Bootstrap. I've traced down that this is because controls are placed into a <div>
with CSS class ol-overlaycontainer-stopevent
, which is somehow preventing the listener in Bootstrap from hearing the event.
Here's a stripped down JSFiddle example of what I'm trying to do. You can see that clicking the tabs doesn't do anything. Any idea how to make sure this event gets to the Bootstrap tab listener?
P.S. From the Bootstrap source code, it appears that the listeners are defined by
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)