Pass mouse events through Bootstrap Grid

StackOverflow https://stackoverflow.com/questions/23359838

Question

I'm trying to add a bootstrap container over a full page google map-control, however I'm unable to pass mouse-events through the container to the map below. My setup looks something like this.

<body onload="initialize()">
  <div id="map-canvas"></div>       

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    ***content in here***
  </div> 

  <div class="container">
    <div class="row">
      <div class="col-md-5 col-sm-6 col-xs-12">
          ***content in here***
      </div> <!--column 1 -->

      <div class="col-md-5  col-sm-6 col-xs-12 pull-right">
          ***content in here***
      </div> <!--column 2-->
    </div> <!--row 1-->

    <div class="row">
      <div class="col-md-5 col-sm-6 col-xs-12">
        ***content in here***
      </div>
    </div> <!--row 2-->
    </div>
</body>

I was hoping that I could position content over the map control while still allowing the canvas beneath to receive mouse events where no content exists in the grid, for example, row 2, column 6 through 12 in the case of a medium display.

As a test I've tried using "pointer-events:none;" on the container but events still do not pass through. My fallback is to simply use css positioning, however I would prefer to use bootstrap (for responsive support).

Is there anyway to pass events through the bootstrap grid to underlying elements?

Was it helpful?

Solution

I was able to solve this problem using "pointer-events". Checked on Mac (Safari, Chrome and Firefox).

All magic is here:

.overmap {
  position: absolute;
  top: 100px;
  left: 50px;
  pointer-events: none;
}

.container .full {
  background-color: #ffffff;
  pointer-events: fill;
}

Please check the demo (central column is passing event to a map): http://jsfiddle.net/giftedev/qu2Lduwp/ and let me if any questions.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top