No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. mattabdi
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 9
    • Best 0
    • Groups 0

    mattabdi

    @mattabdi

    0
    Reputation
    111
    Profile views
    9
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    mattabdi Follow

    Latest posts made by mattabdi

    • RE: Looking for solutions for mobile screen notches (ie iPhone X) [solved]

      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/
      posted in Framework
      M
      mattabdi
    • Looking for solutions for mobile screen notches (ie iPhone X) [solved]

      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

      posted in Framework
      M
      mattabdi
    • RE: Disable fastclick on 0.13 ?

      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

      posted in Help
      M
      mattabdi
    • Has anyone got cordova-plugin-googlemaps to work?

      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.

      posted in Framework
      M
      mattabdi
    • RE: QSelect @change not working (codepen included) (solved)

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

      posted in Framework
      M
      mattabdi
    • RE: QSelect @change not working (codepen included) (solved)

      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

      posted in Framework
      M
      mattabdi
    • QSelect @change not working (codepen included) (solved)

      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
          }
        }
      })
      
      posted in Framework
      M
      mattabdi
    • RE: q-select disable an option (solved)

      Works, Ty!

      posted in Framework
      M
      mattabdi
    • q-select disable an option (solved)

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

      posted in Framework
      M
      mattabdi