Forms and popups - role="fieldcontain" and popup-appending

[T-Philipp]

Hi.

A div with data-role="fieldcontain" doesnt work inside a popup.
You can see an example here: http://jsfiddle.net/B3pyG/

Also jQM is appending all the popup-containers at the end of the role="page" no matter where its placed in the HTML.
When you have a big form and some of its fields inside a popup, these fields will be moved and are no longer inside the form itself, so you cant read the values anymore and are forced to move them again, before the form submit.

Thanks

[jaspermdegroot]

@Fyll

What doesn't work about the field container in the popup?

I see your point about a popup that is part of a form. If it's the only form on the page you can make the page itself the form (<form data-role="page") or if you don't use AJAX navigation, wrap the page in the form.

@gabrielschulhof - You were working on making it possible to have a popup outside a page. Do you think this will also change where we add the popup container in the markup?

[T-Philipp]

Hi,

yes it would be possible to wrap the whole page in the form but unfortunately it would be a pretty "ugly" way to do so, because we are using symfony and dont want to modify the main "template" just because of this "bug"..

A field container should float the label left of the input field and change the width of the input field if there is enough space for that. In a popup it does none of that - it just looks like there wouldnt be a field container around it in any way.

I guess both problems could be fixed by not moving the contents of my popups to an other place in the markup and just let it where I set it in the HTML ;)

[jaspermdegroot]

@Fyll

The field container issue as you describe it has not to do with moving the popup contents, but is something we do on purpose.
We use a media query (min-width 28em) to adjust the label position and input width in field containers on wider screens. However, media queries are always based on the viewport and don't tell us anything about the width of the popup. So a small popup on a wide screen would get an even smaller input and the label in front of it. Because that is unwanted we override the field container CSS and set the input width to 100%.

[jaspermdegroot]

Related: #5946 (comment)

[gabrielschulhof]

@Pfilop I believe you can solve the button-outside-the-form problem by giving the form an ID, and referring to the form via the button's form attribute:

<form id="the-form">
...
</form>
...
<button form="the-form">Submit</button>

Note though that, in the case of a submit button inside a popup, there's a bug for which the fix will land in 1.5.0.