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.

Map incorrectly sizing when StatusBar.overlaysWebView == false

See original GitHub issue

I’m submitting a … (check one with “x”) [ ] question [x] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [ ] 1.4.x [x] 2.0.0-beta3 (multiple maps branch)

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

cordova information: (run $> cordova plugin list)

com.googlemaps.ios 2.3.0 "Google Maps SDK for iOS"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-firebase 0.1.23 "Google Firebase Plugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.0.0-beta3-20170828-2350 "cordova-plugin-googlemaps"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
es6-promise-plugin 4.1.0 "Promise"

Current behavior: When StatusBar.overlaysWebView(false); is called, the map resizes itself incorrectly. It seemingly moves up 20px or so.

Expected behavior: The map should resize as a normal element would, rather than moving up 20px or so.

Steps to reproduce: Repo that reproduces the issue.

On a blank cordova project, adding a map and using the StatusBar cordova plugin to change the status bar overlay is all that it takes. Please run repo locally to see it in action.

Screen capture or video record:

<div align="center"> </div>

Related code, data or error log (please format your code or data): No errors are thrown, and the only code that I use to actually trigger the behavior is

StatusBar.overlaysWebView(false);

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
christopherwk210commented, Aug 30, 2017

If it helps anyone else who comes across this in the future, I solved my issue by manually applying a 20px top padding to the page and kept the status bar overlapping the webview.

0reactions
wf9a5m75commented, Aug 30, 2017

I confirmed the maps plugin does not do anything at all.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Layout issue with status bar #242 - GitHub
I am using the cordova status bar plugin to disable the overlay. ... Map incorrectly sizing when StatusBar.overlaysWebView == false #1688.
Read more >
Phonegap Cordova Statusbar Plugin creating double bars
but then the google map is off in its div. As a solution I am setting StatusBar.overlaysWebView( true ); which causes the bar...
Read more >
cordova-plugin-statusbar
On iOS, when you set StatusBar.overlaysWebView to false, you can set the background color of the statusbar by color name. StatusBar.backgroundColorByName("red");.
Read more >
iOS Status Bar Guide
The StatusBar Plugin can be used to natively address the overlap issue by setting StatusBarOverlaysWebview preference to false in the config.xml or ...
Read more >
[Solved]-iPhone X height problems - appsloveworld
On boot of the app: if (window.StatusBar) { window.StatusBar.overlaysWebView(false); window.StatusBar.overlaysWebView(true); }. After that no problem!
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