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

@Hawkeye64 perfect !!! Thank you so much for that !

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 guys !

Today I just tried to fix this issue again on the Quasar 1.15.1 version but it still doesn’t work for me … any new solution for that please ?

@Hawkeye64 perfect !!! Thank you so much for that !

@metalsadman thanks for the suggestion but I couldn’t reproduce it because of the complexity of the project.

The thing is that I downgraded to Quasar 1.13.1 and it works like a charm again … I checked the release notes and saw that in the 1.13.2 version there is a fixe “fix(QEditor): correctly manage model; keep selection when model changes outside of the component #7647” and I’m almost sure the issue I got is coming from that… I’m sorry that I can’t give more details but the thing is that it’s working on the 1.13.1 and not after.

Hope it will help a bit and I will try again to reproduce my issue.

Do I have to move that in the “Help” section ? I really need help

Hi everyone !

I upgraded to Quasar 1.14.0 2 days ago and since I did it, I have some issues with the QEditor.
Indeed, it looks like the v-model is not updated in a proper way :

As you can see in this picture, I get the good values title 1 and Description 1 but the v-model is not updated. This was working before the version 1.14.0 by using a watch method in the view that was changing the v-model dynamically and depending of the element selected. But now, even with this method, the v-model is not correctly set anymore.

How it looks more globally :

The user select an element in the left list and then the element settings are updated on the right side. This is easily managed in the watch method and was working perfectly:

this.contentHtml = this.element.properties.expression.html

EDIT : I just tried with QInput and it’s working like a charm but not with the QEditor :

Any idea ? Is this a real issue that I have to add on Github ?

Thanks in advance for your help

I got the same issue as you @gruppler and npm install vue didn’t fix it for me but npm install vue-template-compiler.

I have the same issue … any help plz ?

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 ?