@IvanGV
GH = Git Hub
https://github.com/quasarframework/quasar/issues
Best posts made by turigeza
-
RE: QTable hide pagination controls
@reath Use an empty bottom slot.
<template v-slot:bottom></template>
https://codepen.io/turigeza/pen/gJNYpg
You can also hide the empty bottom slot when you don’t want to see it if data isn’t missing. I added that as well to the same pen. Just remove the
:hide-bottom="emptyData.length > 0"
bit if you don’t need it. -
RE: How can I insert my brand logo with a spinner in Loading plugin ?
@IvanGV btw there is a way of doing it if you are very keen : )
You have to create your own custom spinner component. There is a vague example here:
https://forum.quasar-framework.org/topic/4535/custome-spinner/3 -
RE: [solve] Open/close children's dialog from parent => Avoid mutating a prop directly since the value will be...
@Shoooryuken
This is a common Vue error. You should never modify the props.
Instead create a computed property which returns options and on update emit an event to parent.Something on the line of this:
<template> <q-card> <q-dialog square full-width v-model="$_options" position="bottom" class=""> <q-card-section class="row items-center"> <div class="text-h6">{{ title }}</div> <q-space /> <q-btn icon="close" flat round dense @click="close" /> </q-card-section> <q-card-section class="items-center no-wrap">....</q-card-section> </q-card> </template> <script> export default { props: { options: { type: Boolean, default: false } }, computed: { $_options: { get: function () { return this.options; }, set: function (val) { this.$emit('update-options', val); } } }, methods: { activate: function (el) { this.$emit('update-options', false) this.filter = el }, close () { this.$emit('update-options', false) } } }...
-
RE: Q-input border color on focus
@bkirvin
Try this and see pen..q-field--outlined:hover .q-field__control:before { border-color: red; }
-
RE: How to prevent the focus of a button in a list item
@Clyde Remove the
tag="label"
and addclickable
instead and it should work fine.
https://codepen.io/turigeza/pen/xxVoOxW -
RE: Use my own css
You can see what becomes of q-layout in chrome inspector.
If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with
q-layout
. It only make sense that way.As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild
q-header
in the process. And this extra work you are doing for what ?So the options are
a, Style your custom component so it is compatible with
q-layout
.
b, Create your own layout and not useq-layout
. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible withq-drawer
.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel. -
RE: Drag And Drop
This should really be part of Quasar I feel and not an extension. I am going to start bodging the drag and drop today into qTable to start with and then qTree. And many will end up doing the same because sooner or later you will need it. How else are you supposed to organise a tree for example ? There is not many other ways to do it.
-
RE: Custom Component & Mixins & avoid repeating props
Yes ! Thank you for that link. No need for the mixins and also it is not $props I need but $attrs. Sorry it is kind of ended up to be a question about Vue rather then Quasar.
So the final wrapper QInput for me looks like this
<template> <q-input :value="value" v-on="$listeners" v-bind="$attrs" @keyup.enter="updated" @blur="updated" @keydown.meta.83.prevent="updated" /> </template> <script> export default { props: ['value'], methods: { updated: function () { this.$emit('save'); } } }; </script> ```
Latest posts made by turigeza
-
RE: Global constants ?
I was so wrong above I just deleted my answer : ) Sorry. And now @beets already posted a better one : )
https://codepen.io/turigeza/pen/MWjgwQp?editors=101 -
RE: Blank Page with PWA and NGINX
@phgrund
MIME type missmatch is the problem you can see it in the console.add_header X-Content-Type-Options nosniff;
seems causing issues for some.
https://stackoverflow.com/questions/29573489/nginx-failing-to-load-css-and-js-files-mime-type-errorCommenting it out should help as suggested there.
-
RE: [Solved] PWA force refresh when new version released?
@ssuess Thank you for sharing the code and explaining it as well.
-
RE: [Solved] PWA force refresh when new version released?
@ssuess Which one are you using right now ? The last one posted here …
https://forum.quasar-framework.org/topic/2560/solved-pwa-force-refresh-when-new-version-released/31?_=1605731186657forceSWupdate () { if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations().then(function (registrations) { for (let registration of registrations) { registration.update() } }) } }
-
RE: Use my own css
You can see what becomes of q-layout in chrome inspector.
If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with
q-layout
. It only make sense that way.As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild
q-header
in the process. And this extra work you are doing for what ?So the options are
a, Style your custom component so it is compatible with
q-layout
.
b, Create your own layout and not useq-layout
. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible withq-drawer
.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel. -
RE: Use my own css
@acros q-layout takes elements such as q-page, q-header, q-header, q-drawer name it.
Not a single div. Your div is not visible because overflow is hidden on one of its parents.class="q-layout-container overflow-hidden"
You should follow the examples in the doc and use the layout builder to start with. It will save you a lot headache.Or you could not use q-layout and use your own layout. But you will loose out most likely on other components which play well with q-layout.
-
RE: Q-input border color on focus
@dobbel Just as @bkirvin said above.
I use Chrome inspector to find what style apply to the element.
I click on the divs in the source tab and look at the computed styles. I start on the outmost div and work my way in. As I click on the divs I am observing the computed styles and looking for “borders” or “outline” styling.
If I can not locate where they come from I start looking at the after and before elements too.
Once I located the styling I open it and copy paste the exact css which is targeting the element and use that to add my own style.
Oh and sometimes it helps if you force element state like in the case of hover you can not hover the object and navigate the source code at the same time.
-
RE: Quasar CLI partial builds
@metalsadman Great suggestion ! Thank you! Nice to end up with choices : )
-
RE: Quasar CLI partial builds
@beets Super kind ! Thank you! I report back once I had a go at it.
-
RE: Quasar CLI partial builds
@beets Thank you. It is exactly this sort of info I was after : ).