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. joefly
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 18
    • Posts 37
    • Best 4
    • Groups 0

    joefly

    @joefly

    4
    Reputation
    254
    Profile views
    37
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    joefly Follow

    Best posts made by joefly

    • How to open <q-context-menu>

      In the docs, the following example for <q-context-menu> is provided:

          <div ref="target" style="height: 100px; width: 100px; background-color: purple">
            <q-context-menu ref="context">
              <q-list link separator style="min-width: 150px; max-height: 300px;">
                <q-item @click="showToast(), $refs.context.close()">
                  <q-item-main label="Label" sublabel="Value"></q-item-main>
                </q-item>
                <q-item @click="showOtherToast(), $refs.context.close()">
                  <q-item-main label="Other Label" sublabel="Other Value"></q-item-main>
                </q-item>
              </q-list>
            </q-context-menu>
          </div>
      

      However, I cannot figure out how to open the context menu.

      EDIT: I got it!! I had to wrap the q-context-menu in a div with ref=“target”. Then right clicking on the div opens the context menu. I changed the code above to reflect the solution.

      posted in Help
      J
      joefly
    • data/autocomplete.json file?

      I’m trying to replicate the Autocomplete (countries) example from the docs, however, I cannot find the file referenced in the script:

      import countries from 'data/autocomplete.json'
      

      Is this coming from a node module? Any idea which one?

      Thanks 🙂

      EDIT:

      I got this to work with the following NPM package: country-json

      I had to make some minor changes to the code:

      import countries from 'country-json/src/countries-by-name.json'
      
      and...
      
        function parseCountries () {
          return countries.map(item => {
            let countryName = item.country
            return {
              label: countryName,
              sublabel: getRandomSecondLabel(),
              icon: getRandomIcon(),
              stamp: getRandomStamp(),
              value: countryName
            }
          })
        }
      
      posted in Help
      J
      joefly
    • RE: align-items: center

      @benoitranque

      Thanks so much…I can’t believe I didn’t see that 🙂

      posted in Help
      J
      joefly
    • Staggering QTransition Group Animations (list-items)

      Is there a recommended way to stagger QTransition Group Animations with Animate.css?

      I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

      I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

      Any suggestions or recommendations on how to achieve this?

      Following is a stripped version of my current list component:

            <q-list no-border>
              <q-list-header>All Items:</q-list-header>
              <q-transition group appear enter="fadeIn"
              leave="bounceOutLeft">
                <q-item v-for="(item, index) in computedItems" :key="index">
                       // list item content
                </q-item>
              </q-transition>
            </q-list>
      

      Thanks so much 🙂

      posted in Help
      J
      joefly

    Latest posts made by joefly

    • RE: Serve Quasar Project on Regular Website

      Okay…figured it out.
      Just link to index.html in dist folder.
      Much easier than I thought it would be 🙂

      posted in Help
      J
      joefly
    • RE: Serve Quasar Project on Regular Website

      Thanks for your reply.
      Yes, quasar dev works fine.
      With firebase do you just serve the dist folder after building?
      Thanks for the suggestion. 🙂

      posted in Help
      J
      joefly
    • Serve Quasar Project on Regular Website

      I’ve built a Quasar project / application (v0.14) and I would like to add it to my portfolio website.
      However, I cannot figure out how to display the project on a regular website. I changed the router to “history” mode and updated the public path, but all I get is a blank white page when navigating to the index.html file in the dist folder. Is there any documentation on how to achieve this?

      Any guidance is greatly appreciated.

      posted in Help
      J
      joefly
    • Staggering QTransition Group Animations (list-items)

      Is there a recommended way to stagger QTransition Group Animations with Animate.css?

      I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

      I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

      Any suggestions or recommendations on how to achieve this?

      Following is a stripped version of my current list component:

            <q-list no-border>
              <q-list-header>All Items:</q-list-header>
              <q-transition group appear enter="fadeIn"
              leave="bounceOutLeft">
                <q-item v-for="(item, index) in computedItems" :key="index">
                       // list item content
                </q-item>
              </q-transition>
            </q-list>
      

      Thanks so much 🙂

      posted in Help
      J
      joefly
    • RE: 'q-pull-to-refresh' messing up footer

      If anyone is having an issue with the footer ending up in the middle of the page, I found that fixing the footer to the bottom using css helps:

              <!-- Footer -->
              <q-toolbar slot="footer" style="position: fixed; bottom: 0;">
                <q-toolbar-title>
                  Layout Footer
                </q-toolbar-title>
              </q-toolbar>
      

      My experience has been that if I have a lot of content and I scroll to the bottom, pulling from the top of the page no longer works. However, if you are rendering new content at the top of the page (like in the docs) then it’s really not an issue I guess…

      posted in Help
      J
      joefly
    • RE: Apply 'striped' vue-propery to items rendered with v-for?

      @benoitranque @rstoenescu

      Great! That works ! Thanks 🙂

      Template:

          <q-list no-border striped>
            <q-list-header>My List:</q-list-header>
            <q-transition appear group enter="fadeIn" leave="fadeOut">
              <q-item v-for="(item, index) in items" :key="index" :class="{striped: isOdd(index)}">
                <q-item-side>
                  <q-checkbox v-model="item.completed" @click.native="saveList" />
                </q-item-side>
                <q-item-main :label="item.label" />
              </q-item>
            </q-transition>
          </q-list>
      

      Return true if index divides by 2:

          methods: {
                isOdd (index) {
                  if (index % 2 === 0) {
                       return true
                   }
                }
            }
      

      Stylus Class:

          .striped
              background-color #ccc
      
      posted in Help
      J
      joefly
    • RE: Apply 'striped' vue-propery to items rendered with v-for?

      Okay, what I discovered is that the striped prop doesn’t work if wrapped with q-transition. I removed q-transition and the list items are highlighting correctly.

      I don’t know why, so feel free to chime in with a reason/solution.

      Thanks 🙂

      posted in Help
      J
      joefly
    • RE: Apply 'striped' vue-propery to items rendered with v-for?

      @benoitranque

      My apologies…I forgot to include that in the example.

      I did try using the “striped” prop, but I still don’t get striped list items.

      I’m going to do some more testing on it tonight.

      Thanks for your response 🙂

      posted in Help
      J
      joefly
    • Apply 'striped' vue-propery to items rendered with v-for?

      I have the following component, however the striped property doesn’t seem to be working.

          <q-list no-border>
            <q-list-header>My List:</q-list-header>
            <q-transition appear group enter="fadeIn" leave="fadeOut">
              <q-item v-for="(item, index) in items" :key="index">
                <q-item-side>
                  <q-checkbox v-model="item.completed" @click.native="saveList" />
                </q-item-side>
                <q-item-main :label="item.label" />
              </q-item>
            </q-transition>
          </q-list>
      

      Is there any way to apply the ‘striped’ vue-propery to list items rendered with v-for?

      posted in Help
      J
      joefly
    • RE: Cannot generate .apk file while running cordova build android.

      Okay…so I found the best solution, for my case, was to downgrade from latest Cordova ^8.0.0 to ^7.0.1.
      The directory structure for the latest Cordova ^8.0.0 is different, and there is not yet sufficient documentation. This was causing all kinds of problems.

      posted in Help
      J
      joefly