Fix double-offset status bar in Ionic and MFP for iOS 7+

Ionic has automatic functionality for offsetting content to allow for iOS 7+’s transparent status bar, and MFP also introduces logic for this behaviour.

The combination of these two corrections leads to an over-correction, with ion-nav-view content floating 22px below the status bar.

You can fix this by editing the iphone/css/main.css file and replacing the #wl_ios7bar and body.wl_ios7 rules with the following:

    display: none;
     padding-top: initial;

NB. This does not show itself on projects that use Ionic’s ion-side-menus pattern.

Fixing “WLJQ is not defined” errors

This may also manifest as errors like:

  • WL.Client is not defined
  • Uncaught TypeError: Cannot read property 'init' of undefined

This is caused by MFP/Worklight failing to correctly munge the main HTML file for your app.

Because of this, two JS files don’t get loaded:

<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>

These files define WLJQ and WL.Client. Consequently, if they’re not loaded, your app code (see initOptions.js) won’t work.

Don’t hack those lines in manually – MFP expects to do this itself.

When using the CLI

  1. In a terminal enter:
    mfp stop
    rm -r $TMPDIR/wlBuildResources
    rm -r $TMPDIR/wlPreview
    mfp build
    mfp deploy

When using Eclipse

  1. Quit Eclipse (and thus the MFP preview server)
  2. In a terminal enter:
    rm -r $TMPDIR/wlBuildResources
    rm -r $TMPDIR/wlPreview
  3. Restart Eclipse and the preview server.
  4. Build and deploy.

The above instructions should work for Linux and OSX. On Windows, you may find the wlBuildResources and wlPreview directories in C:\temp, or the directory referred to by the TMP environment variable.