@realtebo The class=“fit” would do it.
https://codepen.io/turigeza/pen/yLybBoR?&editable=true&editors=101

@pureblood When ever possible I use Vue’s <keep-alive>.

<q-page-container id="main-page-container">
        <transition enter-active-class="animated fadeIn">
            <keep-alive>
                <router-view>

                </router-view>
            </keep-alive>
        </transition>
    </q-page-container>

This way the components are not recreated every time you navigate to them and retain their scroll position. I am not sure if it is the correct way mind but for me it works. In fact I wonder why this is not the default behaviour … maybe others can explain?

@ulrichd
I get it now : ) and you are right it looks silly for the pop up window to close when the field is not validated.
Here is a modified pen checking if field is valid. I had to reference the input so I can check if it is validated. The same way you would need to do if you are validating multiple inputs.

https://codepen.io/turigeza/pen/eYmgQoG?editors=1010

Multiple input aka form validation is here:
https://quasar.dev/vue-components/input#Example--Form-validation

Notice the
<q-popup-edit v-model="label" :validate="()=>!$refs.myInput.hasError">
and
<q-input v-model="label" ref="myInput"

And also note that for performance you should move the function out of inline template the doc says along the line of

“Validates model then triggers ‘save’ and closes Popup; Returns a Boolean (‘true’ means valid, ‘false’ means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline”

So essentially you are doing it right already …

@ulrichd I am not sure if I understand you correctly but here is pen have a look and see if that helps.
https://codepen.io/turigeza/pen/eYmgPRq?editors=1010

Where did you get those [numeric, required] ? Have you defined those functions ?

@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

I just realised I have no way of keeping alive the content of dialogue. Or do I ?
Every time the dialog opens its content will be recreated. See example here:
https://codepen.io/turigeza/pen/dyPNVYX?editors=1010

My problem is that I have some complex tree in there which takes quite a hit to create and makes the animation of dialog sluggish …

Another reason is that scroll position in the dialog doesn’t get last or the open nodes of a tree stay open (or closed) without having to do any work on storing their state.

Anyway to accomplish this ? Thank you !

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

@rubs Well yet an other way of doing this would be css. Disable the element and then change the style of that element.
https://codepen.io/turigeza/pen/JjoRymX

.q-checkbox.disabled.readonly {
    opacity: 1!important;
}
.q-checkbox.disabled.readonly, .q-checkbox.disabled.readonly *{
    cursor: pointer !important;
}

and then add the class readonly to the element. Maybe missed some classes … but hopefully you get the idea.

@s-molinari You broke it : ))
Seriously though I can not think of a use case for such a thing. Without the visual feedback it feels like the application is broken.

Isn’t the disable state the same ? disable = readonly no ?
https://codepen.io/turigeza/pen/qBEajgz