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
Best posts made by toymachiner62
-
RE: Detect screen size (xs, sm, md, etc) via javascript?
-
RE: What is `bp` in the flex addons documentation?
Oh i get it now.
bp
= breakpoint. -
Detect screen size (xs, sm, md, etc) via javascript?
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 sizemd
, 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?
Latest posts made by toymachiner62
-
RE: What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
@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
-
RE: What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
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.
-
RE: What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
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. -
RE: What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
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 -
What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
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 theq-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
-
RE: How to change checked icon on `q-option-group`
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
andunchecked-icon
to theq-option-group
similarly to how it’s available onq-radio
? -
How to change checked icon on `q-option-group`
I want to change the checked-icon on a
q-option-group
https://quasar-framework.org/components/option-group.htmlI can successfully do this with
q-radio
via thechecked-icon
attribute https://quasar-framework.org/components/radio.html#Vue-Properties, but this attribute does not exist for aq-option-group
.How can I achieve this?
-
RE: Error when trying to use the `Screen` plugin
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 sectionAlthough the error message still does seem a bit misleading maybe?