I simply wanted my header and footer to fill up and down where the notches are. I did not push the header and footer info (tabs) into the notches. Some pieces I’m still trying to figure out like if I really needed to edit the index.template.html and if both .png’s are required.
Steps:

• added the cordova plugin to the project: cordova-plugin-splashscreen
• in /src-cordova/config.xml, I nested inside of <platform name=“ios”>: <splash src=“res/screen/ios/Default@2x~universal~anyany.png” />
  should look like:

    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    </platform>

• created 2 blank .pngs with the dimensions of 2732x2732: “Default@2x~universal~anyany.png” and “Default@2x~universal~comany.png”
• added those png image files to /src-cordova/platforms/ios/<project name>/LaunchImage.launchimage/
• added those png image files to /src-cordova/platforms/ios/<project name>/LaunchStoryboard.imageset/

I’m not really getting anywhere with these cordova / phonegap solutions for notches on mobile phones like the iPhone X:
https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

I will update if I figure this out.

tags: ios android

For the newer Quasar CLI:
I made a fastclick.js file in the “plugins” folder.
fastclick.js:

import FastClick from 'fastclick'
FastClick.notNeeded = true

export default ({ app, router, Vue }) => {}

Remember to add “fastclick” under the plugins array property in quasar.conf.js

I would like to get cordova-plugin-googlemaps to work. Has anyone got this thing working?

• I am testing with ios and android emulators to no avail.
• the googlemaps plugin shows up with $ cordova plugin

Code:
I have this component in a page wrapped with <q-page>

<template>
  <div id="map_canvas">
    <button id="button">Click me!</button>
  </div>
</template>

in my <script> with export default {}

  created () {
    // Vuex get the map lat/lng
    // document.addEventListener('deviceready', () => {
    var div = document.getElementById('map_canvas')

    // Create a Google Maps native view under the map_canvas div.
    // var map = plugin.google.maps.Map.getMap(div)
    var map = window.plugin.google.maps.Map.getMap(div)

    // If you click the button, do something...
    var button = document.getElementById('button')
    button.addEventListener('click', function () {
      // Move to the position with animation
      map.animateCamera({
        target: {lat: 37.422359, lng: -122.084344},
        zoom: 17,
        tilt: 60,
        bearing: 140,
        duration: 5000
      })

      // Add a maker
      var marker = map.addMarker({
        position: {lat: 37.422359, lng: -122.084344},
        title: 'Welecome to \n' +
                'Cordova GoogleMaps plugin for iOS and Android',
        snippet: 'This plugin is awesome!',
        animation: window.plugin.google.maps.Animation.BOUNCE
      })

      // Show the info window
      marker.showInfoWindow()
    })
    // }, false)
  },

<style>
#map_canvas {
  width: 100%;
  height: 500px;
}

button {
  padding: .5em;
  margin: .5em;
}
</style>

Sidenote: I have the Google Maps API JS (through CDN scripts) working. Currently, most of the google map buttons do NOT show up in ios even after playing with the UI options. They show up fine with Android. If anyone needs help on this, let me know.

I replaced @change with @input and that seems to have fixed the issue.

Seems like a known issue but not documented in the docs
https://forum.quasar-framework.org/topic/1867/solved-qselect-change-broken-in-0-15

I am trying to use @change with QSelect and it doesn’t seem like the event is being kicked off.

codepen: https://codepen.io/mattabdi/pen/ZqrdoK

      <q-select
        v-model="selected"
        float-label="Issue Type"
        :options="options"
        @change="atChange"
        style="width: 80%;"
      >
      </q-select>

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      options: [
        {value: 'a',label:'a'},
        {value: 'b',label:'b'},
        {value: 'c',label:'c'}
      ],
      selected: '',
      changed: false
    }
  },
  methods: {
    notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    },
    atChange: function () {
      this.changed = true
    }
  }
})

Works, Ty!

Since q-select controls the options, how would I show but disable an option? For example: <option value="volvo" disabled>Volvo</option>