Please read on this issue on the vuex docs:
https://vuex.vuejs.org/en/forms.html

They also lsit possible solutions.

Will not make a doc page for each setting. Just take a look at quasar.conf page – which is ESSENTIAL when getting to know Quasar – and notice how many they are. Skipping quasar.conf page is like skipping half of Quasar.

0_1521310537688_download (1).png

I still have this problem, and my solution is as follows:

<template> <q-page id="pageChat" ref="pageChat" class="flex column scroll" > ... // ul->lists ... </q-page> <template> <script> mounted(){ this.scrollToBottom() }, methods: { scrollToBottom () { const el = this.$refs.pageChat.$el // MUST call it in timer setTimeout(() => { window.scrollTo(0, el.scrollHeight) }, 100); }, submitMsg () { // do something ... this.$nextTick(function(){ this.scrollToBottom() }) } } </script>

BTW, these two things seem to be the same:

const ela = document.getElementById('pageChat') const elb = this.$refs.pageChat.$el // ela === elb console.log(ela); console.log(elb);

At the end it was as simple as using an img tag and put it inside a q-card-media.
Then for the background thing it was just a matter of using bg-primary class on the title:

<q-card > <q-card-media class='bg-primary'> <img src='~assets/MedUX.svg' /> </q-card-media> <q-card-separator /> <q-card-main> <q-field icon='person' helper='should be an email'> <q-input v-model='username' float-label='Username'/> </q-field> <q-field icon='lock' helper='Length is at least 10'> <q-input v-model='password' type='password' float-label='Password'/> </q-field> </q-card-main> <q-card-separator /> <q-card-actions align='center'> <q-btn color='primary' label='Login' @click='submit' class='full-width'></q-btn> </q-card-actions> </q-card>

Now the only missing part is how to use a subtitle with a primary text color

I don’t need it to be a span at all. I thought that template was just for encapsulate the component, and that it will be read by quasar and transformed into dom elements. I didn’t knew that you can use as a “virtual” dom element.

@danielo515 said in Doubts about data table:

Hello @benoitranque
Thank for your answers. Regarding poing one, I saw several issues about sticky columns, so it should be possible. Here is a guide about making them look prettier:
http://forum.quasar-framework.org/topic/889/qdatatable-sticky-column-style-enhancement/2

Regarding controls I was fearing an answer like that. To be honest, adding a property to my data just to be able to render a control column does not look like something clean to me. Just adding the column is not enough, you must add the actual field to the results.
I thought about using the selection slot, but I am unable to target such slot. Do you know where can I check which slots are available ? I tried body-cell-selecction col-selection and some other combinations. Some documentation about that would be valuable.

Regarding the third, I came to that conclusion too. But you don’t have to render the full body, you can use body-cell slot and save yourself some iteration logic.

Thanks and regards

There no longer is a “selection” slot. Use the selected.sync prop instead

Ok, there should be something weird with the cache after the build process. I manually updated the manifest file directly on the gh_pages branch to point to https://www.danielorodriguez.com/JSONTools/ and now I get 100 of 100 on the PWA check and the service worker works fine.

I’ll try again to set it on the master branch and let it build to see if it happens again.

Many thanks!!!

As @a47ae said I was referring to the documentation page, sorry for being unclear. I took a look and I was surprised to see some ejs templates in there.
Using the click event will break the semantics of the link element. I ended using an a tag with all the button classes except q-btn. I think that offering an element (or set of directives ) to style a link to look like a button is something reasonable, I saw it at several places

@rstoenescu if you mean the detail property that does not fit my needs. according the documentation it only can be an icon or a remote image

Interesting discussion!

Apart from a WordPress theme that I saw somewhere, I haven’t seen any examples (at least not open sourced) of a completely new custom Quasar theme.
It’s nice that there are standard Material and iOS themes out of the box but it’s not for everybody or for every app/website.

What I’m doing often with Quasar is, apart from overriding the variables in the “app variables” file, define/override CSS styles in the “styl” section of my App component, all the components int he app will automatically ‘inherit’ from those styles so they’re essentially “global”.

But this is not the same as a completely separate ‘custom’ theme, which would allow me to run the standard material, iOS and ‘custom’ theme (let’s call it the “web theme” or the “generic theme”) side by side and be able to switch between them.

I suppose developing a completely separate custom theme would just be a matter of copying an existing theme and making changes to it. The big problem of course is keeping the new theme up to date with the two ‘standard’ themes as these are being maintained and developed. Maybe if we could made a good “generic” web/desktop theme we could persuade Razvan to make it part of the core so it’s kept maintained (possibly with help from the community) … I think a third “generic” theme besides the two standard themes would be nice.

Bookmarking this discussion!

@Sfinx might be a good idea to drop nodebb a message with your findings.
The last item cannot be configured.

@benoitranque said in Text area with a maximum height of 100%:

You need to look into flexbox

I tried that code:

<template> <q-page padding> <div class="column full-height"> <div class="col-auto"> Takes up the minimum vertical height needed </div> <div class="col"> <div v-for='(item,idx) in 100' :key='idx'>{{item}}</div> </div> </div> </q-page> </template>

This is what I get:

alt text
alt text

How can I make the second column scroll and keep the first column visible?

Another related question: if I want the drawer to start collapsed and to show up when the first tab is selected, how should I setup it ?
Thanks again

Go for latest version. Always. v0.14 is going to get official in a few days (tomorrow or the day after tomorrow) anyways.

@ERtech Glad you get it to work !
But, about the children, did you try to remove the leading / from your path ?

According to vue-router documentation :

Note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.

Thanks for your answers. To be honest the app will not be so complex: a navbar, three columns, one of them collapsible. The only thing I would like to have our of the box is the desktop looking: small buttons,grouped with no padding or margin between them, and the same thing for columns.
Maybe the closest thing would be the Google documents UI, for example