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-layoutand 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-layoutand 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-layoutand<div slot="footer">along with a<form>tag?
This breaks the footer buttons and moves them to the top
-
Where is your other content? How about adding the content above the footer slotted content?
Scott
-
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-layouton a smaller window -
Well, without the whole code, it’s hard to help. Try to create a fiddle. Then we can look at it together.
https://jsfiddle.net/rstoenescu/waugrryy/
Scott
-
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. -
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
