@IvanGV
GH = Git Hub
https://github.com/quasarframework/quasar/issues

@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.

@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

@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)
        }
    }
}...

https://forum.vuejs.org/t/vue-warn-avoid-mutating-a-prop-directly-since-the-value-will-be-overwritten-whenever-the-parent-component-re-renders/21757

@bkirvin
Try this and see pen.

.q-field--outlined:hover .q-field__control:before {
  border-color: red;
}

https://codepen.io/turigeza/pen/QWEVNEy

@Clyde Remove the tag="label" and add clickable instead and it should work fine.
https://codepen.io/turigeza/pen/xxVoOxW

@acros

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-headerin 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 use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

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.

@bonatoc @Hawkeye64 I couldn’t agree more.

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>
```

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

@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-error

Commenting it out should help as suggested there.

@ssuess Thank you for sharing the code and explaining it as well.

@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?_=1605731186657

forceSWupdate () {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function (registrations) {
      for (let registration of registrations) {
        registration.update()
      }
    })
  }
}

@acros

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-headerin 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 use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.

@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.

@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.

@metalsadman Great suggestion ! Thank you! Nice to end up with choices : )

@beets Super kind ! Thank you! I report back once I had a go at it.

@beets Thank you. It is exactly this sort of info I was after : ).