question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can not click on button outside the map div

See original GitHub issue

I’m submitting a … (check one with “x”)

  • question
  • any problem or bug report
  • feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”)

  • Android
  • iOS

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-plugin-camera 3.0.0 "Camera"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-file 5.0.0 "File"
cordova-plugin-file-transfer 1.7.0 "File Transfer"
cordova-plugin-googlemaps 2.2.5 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-safariviewcontroller 1.5.2 "SafariViewController"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.3.0 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
ionic-plugin-deeplinks 1.0.15 "Ionic Deeplink Plugin"
phonegap-plugin-push 2.1.3 "PushPlugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior: When you put a map and ion-fab elements, it’s not possible to click on fab elements. All clicks are redirected to map

Expected behavior: Clicks on ion-fab should be handled by application logic, not plugin

Screen capture or video record:

Related code, data or error log (please format your code or data): I checked the elements tab in devtools, that elements doesn’t have __pluginDomId attribute and .fixed-content element has zIndex = 0 in domPositions object. Map on the other hand have zIndex = 100.

It worked as expected with 2.1.x, before MutationObserver was integrated

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
wf9a5m75commented, Feb 18, 2018

Temporally solution is

<ion-content padding>
  <div #map style="position: absolute; top: 0; left:0;right:0;bottom:0;height: 100%">
    <ion-fab top right >
      <button ion-fab (tap)="callMe()">+</button>
    </ion-fab>
  </div>

</ion-content>
0reactions
NicolasBehracommented, Apr 3, 2018

Ok, my mistake, I had to put all the ion-fab part inside the div of the map. Sorry 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

click marker google map show a div outside the map [closed]
1. you have a typo in your HTML ( id="info-container> is missing a close ", should be id="info- ...
Read more >
Places Search Box | Maps JavaScript API - Google Developers
This example adds a search box to a map, using the Google Place Autocomplete // feature. People can enter geographical searches. The search...
Read more >
Creating An Outside Focus And Click Handler React Component
In this article, we'll look at how to create an outside focus and click handler with React. We will recreate an open source...
Read more >
<input type="button"> - HTML: HyperText Markup Language
<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a ...
Read more >
Map not responsive after click outside the map when on touch ...
Currently checked on chrome dev tools using the "mobile" tap input emulation. ... Then, clicking on the red area to the right (just...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found