Extra padding is added below status-bar (in iOS) when adding color to status bar

Question

I am using apache plugin : "cordova-plugin-statusbar" to color the status bar to my app theme.

Following is the code snippet for changing status bar color :

if(!StatusBar.isVisible){ StatusBar.show(); } StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString(pinkColor); //pinkColor is defined

But this adds an extra padding below status bar.

Answer 1

I took solution from status bar overlapping the view and changed it as per my requirement

I modified "(void)viewWillAppear" of "MainViewController.m" :

- (void)viewWillAppear:(BOOL)animated
{
  // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
  // you can do so here.
  if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
      CGRect viewBounds = [self.webView bounds];
      viewBounds.size.height = viewBounds.size.height + 20;
      self.webView.frame = viewBounds;
  }
  [super viewWillAppear:animated];
}

Answer 2

I got another alternative solution. As this a plugin, changing "MainViewController" in XCode everytime after build is tiresome.

Status-bar plugin contains CDVStatusBar.m file under src/ios/

I have edited -(void)resizeWebView :

if (!self.statusBarOverlaysWebView) {
        CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
        statusBarFrame = [self invertFrameIfNeeded:statusBarFrame];
        CGRect frame = self.webView.frame;
        // frame.origin.y = statusBarFrame.size.height;
        // frame.size.height -= statusBarFrame.size.height;
        self.webView.frame = frame;
}

I have commented out change in WebView frame size. I hope this helps someone with same issue.

Answer 3

In app.module.ts in ionic 2

remove mode: 'md' in ios

import { IonicApp, IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [ MyApp ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
     mode:md
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})