Radio Buttons: Going Vertical

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

Sometimes you need to go horizontal. Other times you need to go vertical. That's just how it is.

As elements within an XHTML document, radio buttons at their simplest are a type of INPUT (http://www.htmldog.com/reference/htmltags/input/) element that, by default, displays inline. Consistent with this, the out-of-the-box version of Pika displays radio buttons horizontally. One example is at the Documents screen, under "Case Intake Report," where a set of checkboxes and radio buttons run horizontally:

This is a perfectly serviceable arrangment, one that makes the most of precious screen real estate by displaying four distinct page elements inline horizontally, instead of using four vertical lines. The argument can be made, however, that this trade-off is made at the expense of usability, i.e., from the user perspective the "choice" presented by radio buttons (http://www.useit.com/alertbox/20040927.html) is intuitively more quickly and easily understood if the radio buttons are displayed vertically.

Go figure. In any event, in making significant structural modifications to the underlying Pika templates and subtemplates, LSNC (http://www.lsnc.net/) is considering use of vertical radio buttons throughout the system. The initial examples where we have made changes are in a custom template for citizenship screening and the familiar Documents screen, above. For example, the default design of the custom Citizenship Screening page displays three radio buttons horizontally, with a "Citizenship Verified?" checkbox beneath them:

As part of our Sky Pika redesign (http://www.openpika.org/archives/2005/01/sky_pika_alpha.html), what we wanted is vertical radio buttons with the verification checkbox to the right:

How did we do this? In two easy steps:

First, because the radio buttons are dynamically generated, you need to make a change to the PHP library file that controls their display. To do so, at the end of the statement at line 2189 in the pl.php file, located in the /app/lib/ subdirectory, add a BR tag (http://www.htmldog.com/reference/htmltags/br/), highlighted here in yellow:

The addition of the BR or "break" tag forces each generated radio button in turn to display to the next line, i.e., vertically.

Second, we wanted to position the verification checkbox to the immediate right of the newly vertical radio buttons. We did this by inverting the order of the relevant structural markup, i.e., placing the checkbox before the the radio buttons in the markup; assigning an ID attribute (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2) to the paragraph or P tag (http://www.htmldog.com/reference/htmltags/p/) containing the checkbox ...

<p id="verify">
%%[citizen_check,yes_no,checkbox]%% Citizenship Verified?
</p>

<p>
%%[citizen radio]%%
</p>

... and then using CSS (http://www.htmldog.com/reference/cssproperties/) to float (http://www.htmldog.com/reference/cssproperties/float/) the p#verify paragraph with the checkbox to, well, wherever. Here's a screenshot showing the relative relationship of the two paragraphs, with the checkbox paragraph floated to the position of choice and the other paragraph containing the radio buttons simply filling in the remaining available space: