0

So, I'm building a PhoneGap app with Material Design using Framework7 with the Vue plugin for Framework7. The issue I'm having is that when previewing with the Developer App on my iPhone, its loading the app content below the actual status bar which has a white background. If I add a background color to it does nothing. But if I add a tiled image as the backgroud with url(...) it shows that image like you would expect behind the status bar...

The problem is my <f7-navbar> is rendering beneath the device status bar, so there's either just white space or that aforementioned image if I add it (I do not plan on using the image, just noticed it when trying to figure this out). Then, if I use <f7-statusbar> it overlays beneath the device status bar but over my navbar. I have tried the following which did absolutely nothing discernible:

  1. Cordova StatusBar plugin installed (was already installed) with StatusBar.overlaysWebView set to true (tried both within config.xml and in a script with deviceready)

  2. https://stackoverflow.com/a/41187519/6867420

  3. https://stackoverflow.com/a/43435086/6867420

The HTML in question looks like this:

<body>
    <div id="app">
      <f7-statusbar></f7-statusbar>
      <f7-views navbar-fixed layout="dark" theme="red">

Thanks in advance!

EDIT: I forgot to include my CSS:

 body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

      /*background-image:linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-webkit-linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-ms-linear-gradient(top, #f44336 0%, #f44336 51%);
       #background-image:-webkit-gradient(
           linear,
           left top,
           left bottom,
           color-stop(0, #f44336),
           color-stop(0.51,#f44336)
       );
    background: #f44336;*/
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:3em;
    height:100vh;
    margin:auto;
    text-transform:uppercase;
    text-shadow: 2px 2px 5px black;
    width:100%;
    display: flex;
    align-items: stretch; 
}

.app {
            flex: 1;
            position:inherit;             /* position in the center of the screen */
            left:0;
            top:0;
            height:100vh;                   /* text area height */
            width:100%;                   /* text area width */
            text-align:center;
        /*    #padding:0.2vmin;  */   /* image height is 200px (bottom 20px are overlapped with text) */
            margin:0;  /* offset vertical: half of image height and text area height */
                                           /* offset horizontal: half of text area width */

    }

Also, the following similar question did not help fix my issue: Phonegap Cordova Statusbar Plugin creating double bars

EDIT 2: I noticed the following error hiding out in the log which I believe has been there and I just now noticed it (one of those things I suppose):

Error: exec proxy not found for :: StatusBar :: _ready

Any idea how to resolve it? Seems to be a common issue on the phonegap githubs but I've not seen a solid solution that works yet...

Community
  • 1
  • 1
Brandon Hunter
  • 141
  • 1
  • 11
  • In your CSS you are addressing app as a class, but it in your HTML it is an id. If this isn't the error, throw out your custom CSS and try again. It should render well, otherwise you have probably an error in your HTML. – Joerg Apr 28 '17 at 00:20
  • @Joerg Tried that and tried removing my CSS which surprisingly changed absolutely nothing. but I did notice the following error log: `Error: exec proxy not found for :: StatusBar :: _ready` which I believe has been there all along, but never really stood out because it doesn't display with formatting like other errors. – Brandon Hunter Apr 28 '17 at 03:55
  • You might want to check this out: https://stackoverflow.com/questions/44055927/cordova-hide-status-bar – Chin Leung May 30 '17 at 13:56

0 Answers0