Opened 8 years ago
Closed 8 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:
- 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.
- 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)
Change History (13)
comment:1 Changed 8 years ago by
Cc: | cjolif added |
---|
comment:2 Changed 8 years ago by
comment:3 Changed 8 years ago by
Owner: | changed from Eric Durocher to Damien Mandrioli |
---|---|
Status: | new → assigned |
comment:4 Changed 8 years ago by
Milestone: | tbd → 1.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 8 years ago by
Finally creates a new responsive container: dojox/mobile/FormLayout.
Changed 8 years ago by
Attachment: | css-forms.patch added |
---|
Adds dojox/mobile/FormLayout, a new responsive container for creating mobile forms (Damien Mandrioli, IBM CCLA)
comment:7 Changed 8 years ago by
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?
Changed 8 years ago by
Attachment: | index.js.patch added |
---|
test_FormLayout.html was not correctly exposed in the list of tests
Changed 8 years ago by
Attachment: | css-forms-2.patch added |
---|
Adds a 'columns' property to control the layout
comment:10 Changed 8 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
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?