klenwell press

In HTML forms, I generally prefer radio groups over select menus. One advantage select elements have over radio groups is a smaller visual footprint. A long radio list takes up a lot more screen room than a long select list.

One way to make a radio list more efficient is to break it up into columns. I’ve written a CakePhp helper that accomplishes this. An illustration:

radio group without (l) and with (r) columns

It turns out that CakePhp Form helper’s input method gives me all the tools I needed it to adapt my code pretty easily to it.

I’ve pasted the code over on my wiki: http://www.klenwell.com/is/Paste20090110

The part of the code I think is most interesting is the code I use to divvy up the options array into the columns:

// get option list
$OptionList = explode($this->separator_marker, $middle);
$num_options = count($OptionList);

// snip

// divvy options into columns (wrote this code a while ago and seems to work)
for( $i = 1; $i <= $num_cols; $i++ )
{
    $COL[$i] = ceil( $num_options/($num_cols+1-$i) );
    $num_options = $num_options - $COL[$i];
}

I look at it now and I know the gist of what it’s doing, but still have to really stop and think about it to fully understand it. I think it’s interesting because it shows how my mind works better procedurally than it does mathematically.

Here’s an illustration showing again the columnized radio list along with the class and id markup that can be used for styling:

radio columns with id/class markup

I’ll eventually add this the cakewell app in my google code repository.

One caveat: this works with the Form helper’s input method (type set to ‘radio’), but does not seem to work with the Form helper’s radio method.