Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Help
    Log in to post
    • Newest to Oldest
    • Oldest to Newest
    • Most Posts
    • Most Votes
    • K

      Proper way to set body width?
      • khalilm

      3
      0
      Votes
      3
      Posts
      13
      Views

      K

      That worked perfectly. Thank you!

    • L

      How to make q-scroll-area with max height as percentage of the screen?
      div-height height max-height q-scroll-area style • • LouisD135

      6
      0
      Votes
      6
      Posts
      26
      Views

      L

      @Ilia yeah it would have been nice to be able to use the quasar scroll area but this is the type of thing I ended up going with 🙂 thanks for the reply

    • S

      How to store/load a global configuration object using axios?
      • SeRiusRod

      7
      0
      Votes
      7
      Posts
      24
      Views

      S

      Completely. I had the intention of porting two more plain Vue projects I have to quasar, as it seemed cleaner, but now I’ll give it a second thought. Those are loading a global data object.

      I finally ended using the localStorage wrapper. And it works. Although I don’t know if it’s better or worse.

    • A

      ¿how to move to bottom cell in table with enter?
      • Adelson9602

      1
      0
      Votes
      1
      Posts
      14
      Views

      No one has replied

    • C

      How to unit test a bootfile with Jest?
      • Ceriel

      2
      1
      Votes
      2
      Posts
      31
      Views

      D

      I also want to test my router guards. @Ceriel have you figured out how to do this?

    • W

      electron-builder snap not running
      electron snap • • walfin

      1
      0
      Votes
      1
      Posts
      6
      Views

      No one has replied

    • D

      q-select how to close when not in focus
      • darkshifty

      8
      0
      Votes
      8
      Posts
      34
      Views

      D

      @metalsadman thank you, that is a great solution! for reference, I’ve created the following:

      methods: { mouseEnter() { this.mouseLeft = false }, mouseLeave() { this.mouseLeft = true setTimeout(() => { if (this.mouseLeft) { this.$refs.categorySelect.hidePopup() this.$refs.categorySelect.focused = false } }, 200); } }, <q-select standout="bg-red text-white" ref="categorySelect" bg-color="white" class="q-pa-xs" square dense v-model="category" :options="definitions.categoryOptions" label="Catalogus"> <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }"> <q-item v-bind="itemProps" v-on="itemEvents" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <q-item-section> <q-item-label v-html="opt"></q-item-label> </q-item-section> </q-item> </template> </q-select>
    • K

      QTable Height and Scroll?
      • kerbo

      4
      0
      Votes
      4
      Posts
      757
      Views

      M

      @kerbo This works:
      https://forum.quasar-framework.org/topic/5284/q-table-height-virtual-scroll-and-sticky-headers/2
      🙂

    • S

      qdate picker range problem
      • swiftharbour

      3
      0
      Votes
      3
      Posts
      11
      Views

      S

      Thank you so much @metalsadman, super helpful.

      One more datepicker question if you have a moment, we are having issues with the date picker not fitting within the container below without much success in finding a fix. Thoughts? https://share.getcloudapp.com/p9urBeB7

      https://stage.swiftharbour.com/#/guest/business/1/booking/16/Test Business - 001

    • C

      Title For Button Bar
      • cynderkromi

      6
      0
      Votes
      6
      Posts
      21
      Views

      C

      @beets Great idea! Thanks! Yeah having the headers be clickable would be awkward.

    • W

      electron-updater not working
      • walfin

      3
      0
      Votes
      3
      Posts
      19
      Views

      W

      I solved it! I reverted the package.json and package-lock.json files and did an npm ci then npm install --save electron-updater again and it worked! Wonder what caused it to stop working in the first place.

    • H

      Application Error net:: ERR_CONNECTION_TIMED_OUT (http://169.254.80.80:8080/)
      • Hamid

      10
      0
      Votes
      10
      Posts
      23
      Views

      metalsadman

      @Hamid if you can’t open your app in your mobile browser it just mean you haven’t opened your firewall from your dev machine or your mobile isn’t in the same network.

    • Kirschkern

      Q-Menu not closing when clicked anywhere outside
      • Kirschkern

      5
      0
      Votes
      5
      Posts
      25
      Views

      Kirschkern

      @s-molinari Thanks a lot!

    • H

      breadcrumbs last element router link not working...
      • hahi

      3
      0
      Votes
      3
      Posts
      8
      Views

      H

      @beets
      I misunderstood breadcrumbs purpose.
      thanks!

    • Q

      q-page shows under q-header
      • qwedia

      9
      0
      Votes
      9
      Posts
      57
      Views

      beets

      @Hamid Your q-header should be a direct child of q-layout. There’s two good options to doing this.

      First option

      Use vue-router named views. In this case, you separate the page body and header into settings-page.vue (root tag is q-page) and settings-header.vue (root tag is q-header). In your routes file, something like this:

      const router = new VueRouter({ routes: [ { path: '/settings', components: { default: () => import('pages/settings-page.vue'), header: () => import('pages/settings-header.vue'), } } ] })

      and in MainLayout.vue:

      <template> <q-layout view="lHh Lpr lFf"> <router-view name="header" /> <q-drawer> ... </q-drawer> <q-page-container> <router-view /> </q-page-container> </q-layout> </template>

      That will inject the settings-header.vue component into the first router-view and the page into the second router-view. This way you can make different headers, or no header at all, based on the route.

      Read more: https://router.vuejs.org/guide/essentials/named-views.html

      Second option

      Use vue-portal. In this case, you keep the q-header in your current component, but wrap it in a portal tag. In your settings component, it would look like this:

      <template> <q-page class="q-pa-md"> <portal to="header"> <q-header elevated class="bg-yellow"> <q-toolbar> <q-btn flat round dense icon="arrow_back_ios" text-color="grey" class="q-mr-sm" @click="$router.go(-1)"/> <q-toolbar-title class="text-grey text-center text-bold">Options</q-toolbar-title> <q-btn flat round/> </q-toolbar> </q-header> </portal> <h6 class="text-bold text-grey">{{surah.name_simple}}</h6> <q-list bordered separator class="surah-list"> .... </q-list> </q-page> </template>

      And in main layout:

      <template> <q-layout view="lHh Lpr lFf"> <portal-target name="header"></portal-target> <q-drawer> ... </q-drawer> <q-page-container> <router-view /> </q-page-container> </q-layout> </template>

      For this, you must install with yarn add portal-vue then make a boot file at src/boot/portal.js with contents:

      import PortalVue from 'portal-vue' export default({ Vue }) => { Vue.use(PortalVue) }

      And make sure to add 'portal' to the boot array in quasar.conf.js

      Read more: https://github.com/LinusBorg/portal-vue

      For your case, I probably recommend the first option as it is built in to vue-router. I would recommend the second case if the header needed to call methods of the page, or share data that you don’t want in vuex, etc.

    • R

      [solved] Auto-logout, or multi-threading/web worker
      • rconstantine

      5
      0
      Votes
      5
      Posts
      863
      Views

      S

      hello
      how use to redirect to login

    • B

      How can i make width to fit device scren?
      • bosconovitchi

      3
      0
      Votes
      3
      Posts
      13
      Views

      B

      @Ilia Thanks, it works.Happy new year Ilia.

    • J

      Reference HTML file in iframe
      • Jonalxh

      10
      0
      Votes
      10
      Posts
      15
      Views

      J

      Awesome, thanks a lot @beets .

    • Z

      This topic is deleted!
      • zeppelinexpress

      1
      0
      Votes
      1
      Posts
      2
      Views

      No one has replied

    • R

      Gantt Chart for Quasar
      • raghees

      6
      0
      Votes
      6
      Posts
      13
      Views

      I

      @raghees Nice library at first glance but the price bites…