iOS Status Bar and this plugin causing web view to shift down 20px

[pmwisdom]

This issue popped up again on install of iOS 9.0. Basically the webview gets pushed down 20px and you see a white bar, under the StatusBar.

I previously solved it by doing

StatusBar.hide();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString('#eddd1a');
StatusBar.styleLightContent();
StatusBar.show();

And this would magically fix the positioning problems. But its not working anymore.

[hirbod]

I can't reproduce this error.

[pmwisdom]

I'll provide a repo for you to test later. Here are a few screenshots...
Notice the webview shifted down. The green absolute div gets shifted down past the view.

Before the plugin is installed...

After the plugin is installed and built

[hirbod]

Does this also happen when you run on the iPhone / iPhone Simulator?

[hirbod]

Please have a look at this comment:
#242 (comment)

[pmwisdom]

I actually commented in that thread, which was awhile ago, found the aforementioned workaround, which I described in the original post and after the upgrade to iOS 9.0 it no longer works.

[hirbod]

I've tested myself. This can't be fixed atm, sorry. It will only work when StatusBar.overlaysWebView(true) is called. (iOS7+ behave).

Setting StatusBar.overlaysWebView(false); is < iOS 7+ and not best practice by Human Interface Guidelines. Of course, setting this is allowed, but should be avoided.

[pmwisdom]

@hirbod The real problem here is that the webview is pushed down 20px. Not the overlaysWebView part. Either a true or false values for the overlay setting causes the webview to be pushed down 20px. Which can be seen as the green div at the bottom being not shown. Not sure if your aware of a workaround for that.

[hirbod]

I just tried myself, I only got the white bar problem when I set StatusBar.overlaysWebView(false).

[pmwisdom]

Correct, white bar no longer shows up (because its under the status bar) but if you put a div at an absolute, bottom : 0. with another color, You can see that its pushed down outside the view. Without this plugin the div is correctly positioned at 0 and you can see its entirety. You can see the effect in those pictures I posted above.

[hirbod]

I guess I can't fix this due to knowledge issues.. You need to take this issue into account when working with css (maybe margin-top -20px) till we find an acceptable solution. I hope someone with more knowledge (maybe @wf9a5m75, but he don't watch this plugin currently) have any ideas.

From what I can see, something happened since iOS9 with delayed plugin initialization or timing issues, that's why #623 also occured.

[pmwisdom]

Ok. Thanks for the responses. Tried Margin Top before and unfortunately that was a no go as well. I'll keep trying and reply back if I find a consistent solution.

[hirbod]

I'll will also try to find a solution.

[pmwisdom]

Ok I dug around a bit and put my very small objective c experience to work.

So this works, for my specific cordova version and ios 9.0. I don't know if this will work for every other one, I can try to test out when I have other devices / os versions to test with.

What I did was fix the webview rect being passed - 20.

 CGRect fixedFrame = self.webView.frame;
    fixedFrame.size.height -= 20;
    fixedFrame.origin.y -= 20;

  self.pluginLayer = [[MyPluginLayer alloc] initWithFrame:fixedFrame];

[hirbod]

Which file did you patch? I will try this and also add a check around it to proof, if StatusBar Plugin is installed.

[pmwisdom]

GoogleMaps.m I guess it might better belong in MyPluginLayer.m when its initialized. Ill provide you with the full pr when Im near a computer again if you need.

[hirbod]

yeah, please provide one..

[pmwisdom]

K no problem. Should be able to get that out tonight.

[hirbod]

👍

[hirbod]

  Class CDVStatusBarCls = NSClassFromString(@"CDVFile");
  CGRect fixedFrame = self.webView.frame;

  // check if statusbar is installed and remove 20px
  if(CDVStatusBarCls != nil) {
    fixedFrame.size.height -= 20;
    fixedFrame.origin.y -= 20;
  }

But this actually does not work for me. I did not have any problems before, no I do.

[hirbod]

Please could you pull a "cordova plugin version" and tell me your plugin-version?

[hirbod]

actually your code seems fine.. I did some wrong (or not correct anymore) maths do get the screenheight. I will merge this code soon

[hirbod]

I will communicate the change like this:

Important notice

Since plugin version 1.3.3, we will check if the StatusBar plugin is installed and then we will substract -20px from the mapview-height and also move it up (y-offset) by -20px. This will not affect you when you're using StatusBar with default settings, but it will have sideeffects, when you call StatusBar.overlaysWebView(false)

To fix that 20px at the bottom, just add 20 extra pixels to your #map_canvas (with jQuery or vanilla js)

I do something like this

// default (when overlayed)
$('#map_canvas').css('height', $('.ons-page-inner:last').height());
// when not overlayed
$('#map_canvas').css('height', $('.ons-page-inner:last').height() + 20);

Please ignore my ons-page-inner class, this is just an example (im my case, I need exactly the height of ons-page-inner)

You only need this when you having issues, if not, just ignore this!

[pmwisdom]

Thanks @hirbod.

[kamakshi417]

Hi All,
did anybody fixed this issue.
i am facing same problem.
@hirbod. and @pmwisdom did you get solution for this

[hirbod]

@kamakshi417 @pmwisdom

Open GoogleMaps.m

Inside of
- (void)pluginInitialize

search for

self.pluginLayer = [[MyPluginLayer alloc] initWithFrame:self.webView.frame];

and replace with

CGRect viewBounds = [self.webView bounds];
viewBounds.origin.y -= 20;
viewBounds.size.height = viewBounds.size.height + 20;
self.pluginLayer = [[MyPluginLayer alloc] initWithFrame:viewBounds];

[troxler]

@hirbod For the record, I had to replace it with the following:

CGRect viewBounds = [self.webView bounds];
viewBounds.size.height = viewBounds.size.height + 20;
self.pluginLayer = [[MyPluginLayer alloc] initWithFrame:viewBounds];

I did not add the line viewBounds.origin.y -= 20; as that caused a gray bar at the bottom of the screen instead.

[ricardouffcomp]

Finally I found a workaround for this issue. I only tested it in IOS 9. Let me know if it works in Android and other version of IOS:

In the "deviceready" I added the following code:

StatusBar.hide();

setTimeout(function () 
{
    StatusBar.show();
}, 1500);

And before opening the map:

//The Status Bar closes and opens quickly and it was unnoticeable in my phone
StatusBar.hide();
map.showDialog();
StatusBar.show();

I hope it helps.