I just came across the screen plugin which seems like it would solve what i’m looking for! https://quasar-framework.org/components/screen-plugin.html

Oh i get it now. bp = breakpoint.

I see there are all these fabulous css helpers for showing things or not based on the screen size (xs, sm, md, etc) https://quasar-framework.org/components/visibility.html#Window-Width-Related and these work for most of my use cases, but i came across a case where I need to set a boolean variable based on the screen size.

For example I want my q-layout-drawer to render open on page load for anything greater than size md, but i want it to render closed on page load for small screens.

Is there a way I can set a variable in mounted () by detecting the screen size?

That makes 2 of us @s-molinari

That makes 2 of us @s-molinari

@s-molinari The difference is what scrolls. WIth form tag the entire modal scrolls. Without form tag, footer is a sticky footer in the modal and the rest of the content scrolls

Exactly. So is quasar promoting not doing things correctly and breaking accessibility? Using form tags helps a lot of things including using the enter key to submit a form. There’s obvious “hacks” including capturing key bindings to submit forms, etc. but IMO this is not the correct way to do things.

If quasar is not going to address this i guess i’ll have to not use the form and capture key bindings, but it’s my suggestion/recommendation to address things like this in the quasar framework. Vue doesn’t promote this behavior and neither should quasar.

Ok here you go https://jsfiddle.net/suhn9gpr/

Shrink your browser up enough so that the modal scrolls, but is not maximized. Notice how the red bottom is not stuck to the bottom of the modal.

Then go ahead and remove the <form> tag and notice how the red bottom sticks to the bottom of the modal as expected.

If i do that the footer still doesn’t stick to the bottom of the modal as it’s supposed to when using q-modal-layout on a smaller window

I’m trying to create a modal using q-modal-layout and I want the modal to have a <form> tag and I want the submit button to be in the <div slot="footer">.

If i use a <form> tag between the q-modal-layout and the <div slot="footer"> it breaks the footer layout and it’s now on the top of my modal rather than the bottom.

What’s the proper way to use a q-modal-layout and <div slot="footer"> along with a <form> tag?

This breaks the footer buttons and moves them to the top

Seems to be what i’m looking for. I was not aware of this.$q.icon.radio.checked[this.$q.theme] = 'check_circle' `. Is this documented somewhere?

Also any plans to add the checked-icon and unchecked-icon to the q-option-group similarly to how it’s available on q-radio?

I want to change the checked-icon on a q-option-group https://quasar-framework.org/components/option-group.html

I can successfully do this with q-radio via the checked-icon attribute https://quasar-framework.org/components/radio.html#Vue-Properties, but this attribute does not exist for a q-option-group.

How can I achieve this?

Got it. Makes sense.

After reading up on the beginners section again https://quasar-framework.org/components/introduction-for-beginners.html#Using-Quasar-Plugins I see I put 'Screen in the wrong plugins section

Although the error message still does seem a bit misleading maybe?