1

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)
2

1 Answer 1

0

You didn't add a click event to your page so, add it:

$('#prop-box-content li > a').click(function (e) {
  e.preventDefault();
  console.log(e.target);
  $(this).tab('show');
});
2
  • Yep. I figured this out yesterday but forgot to come back to this question. It's still frustrating that the listener registered by Bootstrap.js gets neutered by OpenLayers.
    – kc9jud
    May 30, 2016 at 17:42
  • I actually elected to use a form more like that used in Bootstrap.js itself: $('[data-toggle="tab"],[data-toggle="pill"]', box).click(function (e) { e.preventDefault() $(this).tab('show') });
    – kc9jud
    May 30, 2016 at 23:08

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.