What's the proper way to use a `q-modal-layout` with a `<div slot="footer">` along with a form tag?
-
form is native and has its own thing in the dom, can you not move the submit button or the footer slot out of the form tag? otherwise you’ll have to do some css tricks to make it right imo. usually i wrap form elements with form tag so in mobile the next button appears for input elements, then just have a button for submitting the form data which is a model containing the props for each form inputs i wanted to send in my backend.
-
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
