@Mickey58 Hi! Just use style with % width

 <div class="row">

      <div class="col-md-2">
        <q-btn
          style="width: 100%;"
          label="Short label text"
        />
        <br />
        <br />
        <q-btn
          style="width: 100%;"
          label="Looooooong label text"
        />
      </div>
    </div>

But don’t forget div with row class wrapper outside. Also for mobile is better to use col-xs-12 instead col-md-2

Hi!

I’m trying to implement route guard that will store desired location for user that not yet logged in and redirect to it after login.

let storedURL = null
  router.beforeEach((to, from, next) => {
    const record = to.matched.find(record => record.meta.auth)
    if (record) {
      if (store.getters['auth/check']) {
        if (storedURL) {
          const redirectURL = storedURL
          storedURL = null
          next(redirectURL)
        } else {
          next()
        }
      } else {
        storedURL = to.path
        next('/')
      }
    } else {
      if (to.path === '/' && store.getters['auth/check']) {
        next('/dashboard')
      } else {
        next()
      }
    }
  })

It works, but on store location I have warning in my console:

Error: Script terminated by timeout at:
notify@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:730:36
reactiveSetter@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1056:11
proxySetter@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4625:5
__onControlFocusin@webpack-internal:///./node_modules/quasar/src/components/field/QField.js:345:9
invokeWithErrorHandling@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26
invoker@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14
add$1/original._wrapper@webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6907:25

And on redirect I have an error:

uncaught exception: undefined

Can’t understand what is wrong

@qyloxe Thanks for suggestion! But 5 sec for 200 rows???
For query

SELECT DISTINCT(name) FROM pg_timezone_names WHERE name NOT LIKE '%posix%';

I have 113 ms for 608 rows…
However, there are some names like “Factory”, “GMT/+8”, etc. that make things looks ugly… I’ll take a look how to avoid them.

Hi! I’m making an app that will generate some reports. User can have some projects each of that can belongs to different timezones and reports should consider this. I do understand how to get time in selected location from string (ex. “Europe/Moscow”) at the backend, but how to get selectable list of zones in Quasar?
I guess that can be done with momentjs, but there is a warning about this. Thanks for help in advance!

@gvorster Thanks for help! Will try it after while.

@thibautguedou3 OMG! I was doing the same, but colons were forgotten Thanks!

@Hawkeye64 Changing default variables works well. But where to define .bg-my_color class to be accessible globally? If I define classes in my index.vue

<style lang="scss">
.text-brand {
  color: $brand;
}
.bg-brand {
  background: $brand;
}
</style>

it works

@gvorster could you please write step-by-step instruction? I can’t understand what I’m doing wrong…

Hi! Did you find a solution? I’ve the same problem