I'm developing an application using Apache Click, aimed for mobile browsers -- so I expect to be mostly used in narrow display (240 pixels upward). Currently, I attempt to use a org.apache.click.control.Form
with a couple of org.apache.click.control.Field
s, including TextField
s and Select
s.
However, when attempting to limit the width of the whole page to, say, 240 pixels, the form still overflows horizontally, which forces the user to pan to the right and makes the design "uglish". A possible alternative would be to put the Field
labels on top of the respective input fields, however I haven't found a way to do that as Click renders each Field
as an HTML <tr class="field">
with two <td>
, one containing the <label>
and the other containing the <input>
(for class TextField
) or <select>
(for class Select
).
Some ideas that I'm considering exploring:
<td>
s on top of each other" or something like that. Field
with an empty string label. This seems the "dumbest" solution but also relatively easy.I'm hoping that there might be a relatively simple way to do this that I've not mentioned or thought of. Therefore, I'm looking for suggestions on how to configure Click, or use CSS, or something else, to result in HTML that renders the two Field elements (label and the actual input field) of top of each other instead of the "default" Click side-by-side which takes up some precious screen on "narrow" displays.
Thanks in advance.
I should have spent more time browsing the documentation and examples...
This example provides the form formatting that I was looking for. Basically, it consists on calling setLabelsPosition("top");
on the respective Form
object.