One thing that can help is to create global Vue mixin in boot file.
https://quasar.dev/quasar-cli/cli-documentation/boot-files

export default async ({ Vue }) => { // Inject quasar extension into the vue Vue.mixin({ methods: { dialog (options) { return new Promise((resolve, reject) => { this.$q.dialog(options).onOk(() => { resolve() }).onCancel(() => { reject() }) }) } } }) }

This way, in any component you have dialog method available that is a promise. you can async-await for. I think you have to tune it to suit your need but it can be a good start.

i present the same problem try to disable the autocomplete = “off” it doesn’t work in the v-input help please

@metalsadman I found the bug now. An obscure function in my logic is causing the issue. Thanks again for your time 😉

Finally found the issue. Seems that I need to put the following code in both created and activated life cycle hook:

this.categoryId = this.$route.query.categoryId

I don’t know the reason behind but it’s now working.

https://discordapp.com/channels/415874313728688138/596275834352959499/601418222482227249

i put a Router.beforeEach in the router/index.js, to perform checks/validations etc…

Thanks for the reply.
My aim was not to imply whos issue is that but to see if someone had same experience and how it was solved.

I did some more digging and ran into a cordova-plugin-crosswalk-webview-v3
But the drawback is tha it adds about 17MB to the apk which is too much.

So if someone had this kind of problem and has solved it some other way it would be helpful

Solved. What I’ve done is to set the box-shadow to none by declaring it on my .vue file like this:

<style scoped> .q-table-container { box-shadow: none; } </style>

I can confirm a similar fix to snowdrop’s. I get a vertical scrollbar when using a html table that only overlaps horizontally within a q-page. I think this is something to do with Quasar’s implementation of 100vh and scrollbar heights, and I’ve only seen it happen when using tables.

Problem is solved if I wrap my tables in overflow divs:

<div style="position: relative; overflow: auto; max-width: 100%; "> <table>// Table Content</table> </div>

By the way I tried all kinds of solutions by altering the q-layouts and q-pages styles but I ran into trouble with transitions and other things. Best off not messing with the quasar layout elements too much.

Can still hide the fab like this

<q-fab
ref=“fab”
flat
direction=“down”
icon=“more_vert”
text-color=“white”
class=“fixed gt-sm mapv4-navmenuDesktop z-top”
v-model=“showFab”
@hide=“preventFabHide”>
<q-fab-action color=“secondary” icon=“search”/>
</q-fab>

preventFabHide (ev:any) {
if(ev){
this.showFab = !this.showFab;
}
else{
this.$refs.fab.show() // OR BELOW for ts
(this.$refs.fab as Vue & { show: () => boolean }).show()
}
}

@hipernova Sorry for my late reply. Seems that notifications does not work anymore when someone replies on my previous posts.

Anyway, I did not customize any code in my QTable, I just added the code above between <q-table> and </q-table> tags.

You can change the width, in my example 400px, and specifying the slot in the slot directive by adding body-cell- to your column name. In my case, my column name is address so the slot name became body-cell-address.

@carueda You’re welcome. I was about to ask this on Discord but decided to put it up here so that anyone with the same problem could still look it up. 🙂

@rstoenescu thanks