Multi-column checkboxes and radio buttons in Drupal 7

I recently had to wrangle how to make it easy for web users to select multiple items from a fixed list of taxonomy terms. The mockups for the site laid out several dropdowns that were determined to be difficult to navigate. Converting the taxonomy selection checkboxes presented another problem. The lists were too long. Thus started a two-pronged attack. Get the client to shorten the list and get the checkboxes to display in three columns. Fortunately, there was a good starting place on Drupal.org. Members of the Drupal community had written a solution for Drupal 6 and partially updated the code for Drupal 7. With a few tweaks I came up with the following code.

Add the following to hook_theme():

function mymodule_theme() {
return array(
...
# New!
'multicolumn_options' => array(
'arguments' => array('element' => NULL),
),
...
);
};

And the following somewhere in your .module file:

/**
* Output a list of options in the number of columns specified by the element's
* #columns value.
*/

function theme_multicolumn_options($element) {
$stripped_element = array_values($element);
$element = $stripped_element[0];
// Initialize variables.
$output = '';
$total_columns = $element['#columns'];
$total_options = count($element['#options']);
$options_per_column = ceil($total_options / $total_columns);
$keys = array_keys($element['#options']);
$type = $element[$keys[0]]['#type'];

// Start wrapper div.
$output .= '<div class="multicolumn-options-wrapper">';
$current_column = 1;
$current_option = 0;

while ($current_column <= $total_columns) {
// Start column div.
$output .= '<div class="multicolumn-options-column"> style="width: ' . 100 / $total_columns . '%; float: left">';
// Keep looping through until the maximum options per column are reached,
// or you run out of options.
while ($current_option < $options_per_column * $current_column &&
$current_option < $total_options) {
// Output as either check or radio button depending on the element type.
$output .= theme($type, $element[$keys[$current_option]]);
$current_option++;
}
// End column div.
$output .= '</div>';
$current_column++;
}
// End wrapper div.
$output .= '</div>';
$output .= '<div class="clear-block"></div>';
return $output;
}

Then you can alter your checkbox with this...
 

/**
* Modify CCK keyword checkbox element to use multicolumns.
*/
function myform_form_after_build($form, &$form_state) {
$form['myfield']['und']['#theme_wrappers'] = array('multicolumn_options');
$form['myfield']['und']['#columns'] = 3;

return $form;
}

 

This is a flexible way to alter the appearance of checkboxs and radio buttons. And the same techniques can be used to modify other form elements.

Latest Posts

Drupal Camps are a great resource for people looking to ramp up their Drupal skills. Session tracks range from beginner to expert and spending a day or two at a camp offers an opportunity to exchange experiences with other developers and themers. I've been spending the weekend at Drupal Camp...
​​The question comes up on every web project, "Who is going to write the copy?" Ninety-nine percent of the time the answer from the client is, "We're going to do it ourselves." Somehow the web site gets built and a design gets created even though the copy never...
During our STEMnet meeting yesterday, I had a moment where I realized that non-geeks might not know just how frustrating computers can be for the geeky too. In fact, when you're working with something all the time, the probability of having issues is even higher. And, of course, ...