What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
-
Yes. And with Vue, you don’t need the form tag for submitting the form data to the server. At most, you need it for accessibility.
Scott
-
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.
-
I use form tag a lot too (as means of accessibility) and have to be mindful where to put them since it usually breaks the quasar component styling. maybe you can put a feature request for this in their github page.
-
Btw, your fiddle works perfectly for me in both FF and Chrome. The red footer stays at the bottom, no matter what I do with screen size, even when using the minimized prop.
Scott
-
@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
-
Ah. Ok. That is a different problem than what was described originally.
Maybe @rstoenescu can make a suggestion.
Scott
-
I think this is a css problem and doesn’t have to do anything with quasar. check this codepen (https://codepen.io/zeidanbm/pen/wQEjBB)
The trick is to use flexbox to style it and make sure no scroll is set on parent while wrapper child will have scroll. -
Way to do it: https://jsfiddle.net/rstoenescu/sza3qncg/4/
Few comments:
-
Quoting you: “So is quasar promoting not doing things correctly and breaking accessibility?” and “my suggestion/recommendation to address things like this in the quasar framework” --> No, Quasar was actually the first Vue framework working on accessibility. We take great pride in the components being accessible.
-
This confusion of yours comes from the fact that you are misunderstanding the concept of a slot. You’re using slot=“footer” yet you wrap it with a DOM element (
<form>). Slots are strictly connected to the component upon which you are using them, and it’s equivalent to saying: “hey, component X, this slot needs this content” then the component fills its own template (not your template!) with the indicated slot content. So, wrapping a slot with an element makes no sense… because it’s a slot, it’s not content that you can wrap or place in a specific DOM tree of your choosing for the component — the component decides where to put it. -
Finally, some thing that you should be aware of regarding your comment “Vue doesn’t promote this behavior and neither should quasar”: You are operating with Vue components, not native form elements.
<form>is designed for native form elements. In any case, this is not to be taken as "Quasar components don’t work with<form>", because QInput, QButton (which actually even has a “type” prop: submit, reset, …), … do work. But just be aware these are components, not native form elements.
-Razvan
-
-
Oh brother. Why didn’t I think of putting the layout in the form element…feeling stupid.
Scott
-
That makes 2 of us @s-molinari
