Opened 7 years ago

Closed 6 years ago

#16010 closed enhancement (fixed)

Creating form layouts using CSS tables

Reported by: Damien Mandrioli Owned by: Damien Mandrioli
Priority: undecided Milestone: 1.9
Component: DojoX Mobile Version: 1.8.0
Keywords: Cc: cjolif
Blocked By: Blocking:

Description

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.

  1. 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>

Attachments (3)

css-forms.patch (52.7 KB) - added by Damien Mandrioli 6 years ago.
Adds dojox/mobile/FormLayout, a new responsive container for creating mobile forms (Damien Mandrioli, IBM CCLA)
index.js.patch (999 bytes) - added by Damien Mandrioli 6 years ago.
test_FormLayout.html was not correctly exposed in the list of tests
css-forms-2.patch (66.6 KB) - added by Damien Mandrioli 6 years ago.
Adds a 'columns' property to control the layout

Download all attachments as: .zip

Change History (13)

comment:1 Changed 7 years ago by cjolif

Cc: cjolif added

comment:2 Changed 7 years ago by 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?

comment:3 Changed 7 years ago by Eric Durocher

Owner: changed from Eric Durocher to Damien Mandrioli
Status: newassigned

comment:4 Changed 7 years ago by cjolif

Milestone: tbd1.9

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.

comment:5 Changed 6 years ago by Damien Mandrioli

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

Changed 6 years ago by Damien Mandrioli

Attachment: css-forms.patch added

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

comment:6 Changed 6 years ago by cjolif

In [30617]:

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

comment:7 Changed 6 years ago by 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?

Last edited 6 years ago by cjolif (previous) (diff)

Changed 6 years ago by Damien Mandrioli

Attachment: index.js.patch added

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

comment:8 Changed 6 years ago by cjolif

In [30624]:

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

Changed 6 years ago by Damien Mandrioli

Attachment: css-forms-2.patch added

Adds a 'columns' property to control the layout

comment:9 Changed 6 years ago by cjolif

In [30748]:

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

comment:10 Changed 6 years ago by cjolif

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.