Posts made by MusicForMellons

I have a scrollbar appearing on all my pages. The issue seems pretty similar to this one, but I did not have the problem when on version 0.17 (and earlier), but it started after being on v1.0.0, so that is odd. I have it both on Chrome and on Firefox. I can make the scrollbar disappear by unchecking body { min-height: 100vh } in Chrome dev, but I do not know how to unset this css value in my code. I tried body { min-height: unset } and body {min-height: auto} but the scrollbar remains. Here is a fiddle that shows the behavior.

After using @load for the scroll-element and adding a nextTick it seems to work as should. See this stackoverflow-issue .

I have multiple children and need to scroll to a certain child after loading the page. I can do so by setting a delay using setTimeout but I would prefer a better/ fail-proof solution. My current approach is to wait for all children to mount (and use nextTick) and thought it should be ready for the scroll, but apparently not. Alternatively I can wait for all images to be loaded (as QImg has a @load event), but that is really late, since manually I can already trigger a scroll while image boxes are already rendered but still loading. What is the best way to trigger at ‘the earliest possible moment’?

Point-panel (parent):

new Vue({
  el: '#q-app',
  template: `
      <div id="point-panel" class='map-overlay column scroll'>
            <small-cards @child-mounted='cardsAreReady' 
                 v-for='(point, cardIndex) in picArray'
                 :key="cardIndex"
                 :point-object="point"
                 :card-index="cardIndex"></small-cards>
            <q-btn @click.native="scrollToCenter"
           fab
           ripple
           class='fixed'
           size="10px"
           color="black"
           label="scroll"
           style="right: 18px; bottom: 120px" />
  </div>
        </div>
    `,
  data() {
    return {
      parentMounted: false,
      selectedPointIndex: 6,      
      picArray: ["https://image1", "https://image2, "https://image_etc."]
     }
      },
      mounted: function() {
      let that = this
      	that.$nextTick( function(){
        	that.parentMounted = true
        })
      },
      methods: {
        notify(msg) {
          this.$q.notify(msg)
        },
        cardsAreReady(cardIndex) {
          console.log('one ready.......', `${cardIndex + 1} ...and total ${this.picArray.length}`)
          let that = this
          if (cardIndex + 1 === this.picArray.length) {
            console.log('....all cards MOUNTED!', cardIndex)
            setTimeout(() => {
              that.$nextTick(() => {
                console.log('..........trigger scroll NOW!')
                if (that.parentMounted === true) {
                  that.scrollToCenter()
                } else {
                  that.$q.notify('parent not yet ready!!')
                }
              })
            }, 0)
          }
        },
        scrollToCenter() {
          const that = this
          console.log('..........cardIndex: ', that.selectedPointIndex)
    
    
          function scrollFunction() {
            that.notify('scroll triggered!')
            const element = document.getElementsByClassName(
              that.selectedPointIndex.toString()
            )
            const target = document.getElementById('point-panel')
            const iW = window.innerWidth
            const iH = window.innerHeight
            const myOffset = element[0].offsetLeft
            Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
    
          }
          setTimeout(() => scrollFunction(), 0)
        }
      }
    })
    

Images/ small-cards (children):

Vue.component('small-cards', {
  props: {
    pointObject: {
      type: Object,
      required: true
    },
    cardIndex: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      selectedPointIndex: 6
    }
  },
  mounted: function() {
  let that = this
  that.$nextTick(function () {
   that.$emit('child-mounted', this.cardIndex)
   })
  },
  methods: {
    reportError(event) {
      console.log(`${event.name}: ${event.message}`);
    },
  },
  template: `
        <div class="mycard"
       :class="{'active': cardIndex === selectedPointIndex,
          [cardIndex]: true}">
    <q-img :src="pointObject"
           spinner-size="30px"
           style="background-color: rgba(255, 225, 215, 0.4)"
           @error="reportError">
    </q-img>
  </div>
  `
})

Here you can find a jsfiddle showing the issue. I have added a scroll button to show that after loading you can trigger a scroll successfully (the 6th picture, i.e. ‘the Tiger’ is scrolled to the bottom-left corner).

To give the question somewhat more direction: The problem is that if scroll is triggered to soon the Dom is not yet rendered and thus the distance to scrol can not yet be determined. But I would think that after mount in combination with $nextTick the Dom should be determined?! So why does current approach not work?

Yeah, I am on core-js 2 now and it works. Thanks!

Yeah for me too. Got some other errors now when running my app which I reported elsewhere.

I upgraded and the preset is included in my babel.config.js . When running dev script on my app I get:

> Executing task: npm run dev <


> Myapp@0.0.1 dev /home/usr/myproject
> quasar dev


 Dev mode.......... spa
 Pkg quasar........ v1.0.0-rc.2
 Pkg @quasar/app... v1.0.0-rc.4
 Debugging......... enabled

 app:quasar-conf Reading quasar.conf.js +0ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +4ms
(node:25416) UnhandledPromiseRejectionWarning:   TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
  
  - index.js:25 Object.<anonymous>
    [y1]/[mini-css-extract-plugin]/dist/index.js:25:5
  
  - module.js:11 require
    internal/module.js:11:18
  
  - cjs.js:3 Object.<anonymous>
    [y1]/[mini-css-extract-plugin]/dist/cjs.js:3:18
  

(node:25416) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:25416) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I tried both npm and yarn, but both give same problems on a project that was working fine on v1 beta. After deleting node_modules and package-lock.json and reinstalling I get error saying all kinds of packages missing and suggesting to install them with:

To install them, you can run: npm install --save core-js/modules/es.array-buffer.slice core-js/modules/es.array.concat core-js/modules/es.array.filter core-js/modules/es.array.find core-js/modules/es.array.find-index core-js/modules/es.array.flat core-js/modules/es.array.includes core-js/modules/es.array.index-of core-js/modules/es.array.iterator core-js/modules/es.array.join core-js/modules/es.array.map core-js/modules/es.array.slice core-js/modules/es.array.sort core-js/modules/es.array.splice core-js/modules/es.array.unscopables.flat core-js/modules/es.function.name core-js/modules/es.map core-js/modules/es.number.constructor core-js/modules/es.number.is-integer core-js/modules/es.number.to-fixed core-js/modules/es.object.assign core-js/modules/es.object.entries core-js/modules/es.object.get-own-property-descriptor core-js/modules/es.object.keys core-js/modules/es.object.to-string core-js/modules/es.parse-float core-js/modules/es.parse-int core-js/modules/es.promise core-js/modules/es.promise.finally core-js/modules/es.regexp.constructor core-js/modules/es.regexp.to-string core-js/modules/es.string.anchor core-js/modules/es.string.ends-with core-js/modules/es.string.fixed core-js/modules/es.string.includes core-js/modules/es.string.iterator core-js/modules/es.string.match core-js/modules/es.string.replace core-js/modules/es.string.split core-js/modules/es.string.starts-with core-js/modules/es.string.trim core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.typed-array.copy-within core-js/modules/es.typed-array.every core-js/modules/es.typed-array.fill core-js/modules/es.typed-array.filter core-js/modules/es.typed-array.find core-js/modules/es.typed-array.find-index core-js/modules/es.typed-array.for-each core-js/modules/es.typed-array.includes core-js/modules/es.typed-array.index-of core-js/modules/es.typed-array.iterator core-js/modules/es.typed-array.join core-js/modules/es.typed-array.last-index-of core-js/modules/es.typed-array.map core-js/modules/es.typed-array.reduce core-js/modules/es.typed-array.reduce-right core-js/modules/es.typed-array.reverse core-js/modules/es.typed-array.set core-js/modules/es.typed-array.slice core-js/modules/es.typed-array.some core-js/modules/es.typed-array.sort core-js/modules/es.typed-array.subarray core-js/modules/es.typed-array.to-locale-string core-js/modules/es.typed-array.to-string core-js/modules/es.typed-array.uint8-clamped-array core-js/modules/web.dom-collections.for-each core-js/modules/web.dom-collections.iterator

But these seem core-js files so I am puzzled…?!

Exact same here.

@metalsadman Great! Thanks!

@metalsadman You’re right: mount should be function. However: in your version the picture the file.__img does not load either…, which was the point. The errors in the console are just showing up in codesandbox (for both the ‘one-component’ and ‘parent child’ solutions => should not matter) and are indeed related to quasar version (I found a related issue, which now is solved). I tried/ looked up using quasar v17 with codesandbox, but don’t know how to do it (you install the entire cli…?).

I am trying to split the quasar uploader into a parent and children, but the file property does not work somehow… Anyone can tell me why? See here for full details.

Would be cool have this one ‘setup’ as well:
https://github.com/antvis/f2
see also:
https://medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d

See this for a solution and whether that’s how it should be done…:
https://github.com/quasarframework/quasar/issues/2033

@Jaxon No, sorry. I got this answer recently, but it does not answer your issue: https://stackoverflow.com/questions/49616642/jest-unit-testing-config-with-quasar-framework-0-15

I gave up on Jest for now and work happily with cypress (use it for e2e, and some unit-testing when necessary…).

The docs seem to indicate that when you use custom size (or use one of the default sizes) for a button the icon size adjusts accordingly. See docs and this picture:

However when I use e.g. this button:
<q-btn
v-if="$route.name === ‘home’"
class=“absolute-top-left”
flat
round
wait-for-ripple
dense
size=“160px”
color=“primary”
icon=“close”
@click.native=“goToSignIn”
/>
The button indeed grows but icon stays same size. Same for other size values. I thought it might relate to using mdi icons, but when I use the default material icons I get same behavior. What’s wrong/ what am I doing wrong?

Yeah, but ‘quasar’ alias is already preconfigured from node_modules/quasar-cli webpack-conf.js:

alias: {
quasar: appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.esm.js`),
src: appPaths.srcDir,
components: appPaths.resolve.src(`components`),
layouts: appPaths.resolve.src(`layouts`),
pages: appPaths.resolve.src(`pages`),
assets: appPaths.resolve.src(`assets`),
plugins: appPaths.resolve.src(`plugins`),
variables: appPaths.resolve.app(`.quasar/variables.styl`),

// CLI using these ones:
'quasar-app-styl': appPaths.resolve.app(`.quasar/app.styl`),
'quasar-app-variables': appPaths.resolve.src(`css/themes/variables.${cfg.ctx.themeName}.styl`),
'quasar-styl': appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.styl`)
}

and when I used that webpack setting it is not picked up by pycharm, see this issue. This issue is recorded here:
https://youtrack.jetbrains.com/issue/WEB-32143

@vinstah Ah, thanks. I get these error messages (and components are ‘registered’ I think…):
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The Pycharm IDE does not recognize the ‘quasar’ alias and thus gives a warning (‘quasar module not imported’). I tried to make the alias explicit in webpack by doing in quasar.conf.js:
cfg.resolve.alias = {
…cfg.resolve.alias,
‘quasar’: path.resolve(__dirname, ‘/node_modules/quasar-framework/dist/quasar.mat.esm.js’)
}

but i get:

 app:quasar-conf Reading quasar.conf.js +978ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +3ms
 app:quasar-conf Generating Webpack config +5ms
 app:quasar-conf Extending Webpack config +13ms
 app:generator Generating Webpack entry point +2ms
 app:dev-server Booting up... +2ms

 ERROR  Failed to compile with 19 errors22:00:51

This dependency was not found:

* quasar in ./.quasar/quasar.js, ./src/api.js and 17 others

To install it, you can run: npm install --save quasar

Anyone knows how to get rid of the warning (not using eslint escape command all the time)…?

@vinstah Do jest snapshots work with your settings? I think vue-server-renderer needs to be installed for instance?

This issue somehow recently disappeared, so it is ok again! Strange!?