Forms in Apache Click: how to stack labels with fields?

Question

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.Fields, including TextFields and Selects.

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:

• I admit that there might be some "CSS magic" that I don't know of and that allows to tell the browser to "render all <td>s on top of each other" or something like that.
• Another idea that I have (which involves some more work) is to subclass those classes, putting explicitly the label and fields on top of each other as they're HTML rendered. Some mobile browsers (e.g. Windows Mobile based that I've tested with) have a "adjust to single column" option, but this requires explicit user intervention. There doesn't seem to be a similar option in other browsers, such as Opera Mobile.
• Explicitly putting the separate label and 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.

Answer 1

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.