CakePhp: Radio Select Columns

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 columns (r)
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.

Advertisements
CakePhp: Radio Select Columns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s