Thanks ! My misstake was that i didn’t set option with path: '/'. Now it’s working.

Hi @snowdrop ,

When you have no modal open, isn’t it because of a padding or margin in your container that you have this scrollbar ?

But when you open a modal it’s totally normal the scrollbar disappears because of this CSS wich is automatically added to the body.

body.with-modal {
    overflow: hidden !important;
}

The modal is in position fixed and over everything with a z-index and so no need to have a scrollbar on the body because it’s the content of the modal itself that is scrollable.

Hope it helps !

Hi everyone,

I really need your help to make a plugin of Cordova working with my Quasar app.
I did exactly the same as in the doc here: http://quasar-framework.org/guide/cordova-plugins.html#Example-Camera but after i took a picture, it doesn’t render in my app. I tried to adapt it for video but i still have the same issue.

What I really want to do is use this plugin of Cordova : https://www.npmjs.com/package/cordova-plugin-media-capture to allow the user to take a video and then display it in a vue component.

Maybe it’s simple but i never really used the plugins of Cordova before and I can’t display the video after I recorded it.

Here is my code :

<template>
  <q-carousel
    color="white"
    class="fullscreen"
    quick-nav
  >
    <q-carousel-slide class="text-white bg-primary row flex-center column">
      <div class="text-center">
        <div class="q-display-2">First Slide</div>
        <div>Slides can contain any content.</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide class="text-white bg-secondary row flex-center column">
      <div class="text-center">
        <div class="q-display-2">Second Slide</div>
        <div>Slides can contain any content.</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide class="text-white bg-tertiary flex-center column">
      <div class="text-center">
        <div class="q-display-2">Introduce Yourself</div>
        <div>Slides can contain any content.</div>
      </div>
      <q-video
        :src="videosrc"
        style="width: 100%; max-width: 600px; height: auto"
      />
      <q-btn color="amber" class="q-ma-md"  push size="lg" label="Take Video" @click="captureVideo"/>
    </q-carousel-slide>
    <q-btn
      slot="quick-nav"
      slot-scope="props"
      color="white"
      flat
      :label="`${props.slide + 1}`"
      @click="props.goToSlide()"
      :class="{inactive: !props.current}"
    />
  </q-carousel>
</template>

<script>
document.addEventListener('deviceready', () => {
  // it's only now that we are sure
  // the event has triggered
}, false)
export default {
  name: 'Slides',
  data () {
    return {
      videosrc: ''
    }
  },
  methods: {
    captureVideo () {
      var captureSuccess = function (mediaFiles) {
        var i, path, len
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
          path = mediaFiles[i].fullPath
          this.videosrc = path
        }
      }
      var captureError = function (error) {
        this.$q.notify('Could not access device camera.')
        navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error')
      }
      navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1})
    }
  }
}
</script>

I will be very grateful if someone could help me ! : /

Thanks in advance !

Hi @section14 ,

Indeed, in the v0.15, QTable doesn’t handle the responsive anymore (for the moment)…
I did it on my own (because i really need responsive mode too) .
To apply the following code just add the class ‘table-responsive’ to <q-table> and data-label="Column title" to your ‘q-td’ which correspond to the title of the column

app.scss :

@media screen and (max-width: 767px) {
  .table-responsive {
    table {
      border: 0;

      thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      tr {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        padding: .35em;
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
      }

      td {
        border-bottom: 1px solid #ddd;
        display: block;
        text-align: right;
        white-space: initial;
        height: auto;
        padding: 8px 8px;
        min-height: 32px;

        &::before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
          text-transform: uppercase;
        }

        &:first-child {
          width: 100%;
        }

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}

My table :

<q-td auto-width :data-label="Title">
   Content of the td
</q-td>

Let me know if it doesn’t work as expected.

Hi guys,

First of all, congratulation for this new awesome version of Quasar ! It’s just all what i was looking for to develop my project !
But today i really need your help guys…
My project is running with quasar 0.17 and today i wanted to upgrade to the last version 1.0 beta for the new features.
So first i upgraded the quasar-cli in global and then i started to compare a new project created with the new cli to mine previously created with the 0.17 version… After multiples errors related to the quasar.conf.js and babel that i fixed, now it build but the compile fails with 9 errors… The problem is that I don’t know what those errors are … As you can see :

How to know what those errors are or what is the best way to upgrade from 0.17 to 1.0 beta please ?

Thanks in advance !

Hi everyone!

I’m using the QEditor with Quasar 1.9.15 and today, after testing on Quasar Doc too, I noticed font size match error.

I’m not sure that it’s a normal feature so I wanted to report it :
If you set a simple ordered list and change the fontSize of it, it will not change the list number fontSize.

Thanks a lot for the awesome work and I hope it will help!

Fine thank you !

@s-molinari do i have to add a label on it too ? It’s the only issue who hasn’t one.
If yes how can I do that please ?

Hi everyone!

I’m using the QEditor with Quasar 1.9.4 and today, after testing on Quasar Doc too, I noticed font size match errors:

• By default it’s A bit small (in the selector) that seems to be set to the text we write. But after clicking on A bit small, font size decreases even more.
• In addition if you select Normal size, it will give you a bigger size than default one.
• Same problem when you Remove the format of the text.

To sum up, I think there are issues with the font by default in the QEditor and the tags <font size="*"></font> added in the QEditor after selecting a specific size.

Thanks a lot for the awesome work and I hope it will help!

Thank you a lot @s-molinari ! Exactly what I needed ! I will create a codepen next time !

Hi everyone,

I’m trying to use an autocomplete filter in a QSelect with object options and not simple strings but i can’t succeed!

Can you please give me an example for this ? I’m using Quasar 1.9.2.

Thanks in advance!

Sweetyy

No idea ?

By the way I’m using Docker too.
Do you think it could be related to docker ?

@chyde90 thank you for your help but it does not work…
I tried quasar clean and I already restarted multiple times the devserver before that try…

Any other idea ?

Hi everyone !

I upgraded my project from 0.17 to 1.x 2 months ago and i didn’t have any main issues until today…

Referring to the documentation, I removed the quasar.variables.styl and replaced it by quasar.variables.scss and of course adapted the stylus to scss.

Now I just have the quasar.variables.scss in the css folder but when I try to compile I get an error :

error  in ./node_modules/quasar/dist/quasar.sass
node_1  |
node_1  | Module build failed (from ./node_modules/sass-loader/lib/loader.js):
node_1  |
node_1  | /*!
node_1  | ^
node_1  |       File to import not found or unreadable: quasar/src/css/variables.sass.
node_1  |       in /var/www/node_modules/quasar/dist/quasar.sass (line 1, column 1)
node_1  |
node_1  |  @ ./node_modules/quasar/dist/quasar.sass 4:14-251 14:3-18:5 15:22-259
node_1  |  @ ./.quasar/client-entry.js
node_1  |  @ multi (webpack)-dev-server/client?http://0.0.0.0:80 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

If I put back the quasar.variables.styl with the quasar.variables.scss the error is not here anymore but the css from the quasar.variables.scss is not even read (normal referring to the doc).

Do you have any idea why I can’t just have the quasar.variables.scss ?

Thanks in advance !