Creating form layouts using CSS tables

[Damien Mandrioli]

Dojox.mobile does not have a widget for creating forms. Currently, users can find form examples in 2 files:

1. tests/test_FormControls.html

An example of an edge-to-edge form with controls aligned on the right. This example uses HTML table with "text-align:right" to align controls.

2. demos/mobileGallery

In this form, controls are aligned on the left using a lot of CSS. RoundRect? is not used in this demo but round-corner boxes are redefined in the CSS of the demo. As a consequence, showcase form looks like iOS on Android.

---

The idea of this patch is to simplify form layouts by adding a "mblFormLayout" selector to the library: Example:

<div class="mblFormLayout">

<div>

<span>Checkbox</span> <div><label for="cbox">Click me</label><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox?"></div>

</div> <div>

<span>Toggle Button</span> <div><button data-dojo-type="dojox.mobile.ToggleButton?">Toggle me</button></div>

</div> <div>

<span>Switch</span> <div><input type="checkbox" data-dojo-type="dojox.mobile.Switch" value="on"></div>

</div>

</div>

By default, the layout is edge-to-edge. This can be changed using a second optional selector: "leftAlign". Example: <div class="mblFormLayout leftAlign">...</div>

[ykami]

I don't know how useful it is in general, but if you do so, you should have a separate css file rather than increasing the size of common.css, which is used by almost all the user apps, following the 'everything should be optional' principle. :-) Also, "leftAlign" is not a very good naming. It could cause name conflicts.
Maybe it should be a sample code so that the users can tailor it in any way to suit their apps?

[cjolif]

I think this is useful. jQuery Mobile users get that sort of layout for free and I suspect they do love it.

Ideally the layout should be responsive and layout in two columns for tablets (1 column for form labels, 2nd column for form fields) and 1 column for phones (label, field, label, field).

If we consider this too big we can indeed externalize it into a separated stylesheet as ykami suggested.

[Damien Mandrioli]

Finally creates a new responsive container: dojox/mobile/FormLayout.

[Damien Mandrioli]

Adds dojox/mobile/FormLayout, a new responsive container for creating mobile forms (Damien Mandrioli, IBM CCLA)

[cjolif]

In [30617]:

refs #16010. Adds dojox/mobile/FormLayout, a new responsive container for creating mobile forms. Thanks Damien Mandrioli (IBM CCLA).

[cjolif]

will be closed once documented. Please be sure to document this is media query based and respond to screen size. Indeed this might be problematic when using this with for example dojox/app. In this case what you would really like to respond to is the view size not the screens size. Is that something we could add on top of that as a possible enhancement?

[Damien Mandrioli]

test_FormLayout.html was not correctly exposed in the list of tests

[cjolif]

In [30624]:

refs #16010. test_FormLayout.html was not correctly exposed in the list of tests. Thanks Damien Mandrioli (IBM, CCLA).

[Damien Mandrioli]

Adds a 'columns' property to control the layout

[cjolif]

In [30748]:

refs #16010. Add a columns property to control the layout. Thanks Damien Mandrioli (IBM, CCLA).