formswidthclick-framework

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


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


Solution

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