Now you can display taxonomy vocabularies (categories) as radios or checkboxes.

This module seamlessly overrides the select box generated by the taxonomy module and renders the terms as checkboxes or radio buttons based on whether or not you are allowing multiple selections.

Features

  • Multiple selection vocabularies show as check boxes.
  • Single selection terms display as radio boxes.
  • Parent terms display as nested field sets.
  • Option to display parented terms as form items.
  • Ability to control which content types TSS will apply to.
  • Works with all hierarchy configurations.
  • Free tagging vocabularies are now supported.

Written for northStudio.com clients.

Installation

Normal module installation applies.

Configuration

Configuration is very simple:

  1. Access the configuration options:
    • Drupal 5:
      1. Go to Administer >> Content >> Categories.
      2. Choose the "edit" link for the category for which you wish to enable the module.
      3. There will be a form fieldset near the top; you may need to expand it.
    • Drupal 6:
      1. Go to Administer >> Content management >> Taxonomy >> list.
      2. Choose the "edit" link for the vocabulary for which you wish to enable the module.
      3. Under the Settings fieldset, look for "Taxonomy Super Select" & expand it.
  2. Check the box for the content type you wish to use Taxonomy Super Select.
  3. Decide whether you wish to "Display parent terms as form items." Leaving this option disabled forces users to select dangling child terms. It can be useful for grouping terms with descriptive parent terms that are not themselves needed for the display.
  4. Make what other choices you would normally make.
  5. "Submit" the form.

That's it! Now when you create or edit content of the chosen type, the standard term drop down box will be replaced with check boxes (if the category allows multiple select) or radio buttons (if the vocabulary is single select).

There are no other settings or access permissions.

CSS Recipes

Creating Columns for Checkbox Layout Using CSS

-- Tested on version 6.x-1.3 --
You can change the display of the taxonomy-super-select checkboxes on node edit forms with custom css.
The following code displays the boxes in columns and was created to work with multiple vocabularies in one form. If you want to put all of your taxonomy-super-select checkboxes in to columns see below for a note*.
The key elements you need are:

  • The Vocabulary ID
  • The column width you want to use

The Vocabulary ID can be found by navigating to your Taxonomy Content Admin page (/admin/content/taxonomy) and noting the ID at the end of edit link url on your desired vocabulary. For example, if I edit my vocabulary: "Who are we serving - Topics" the URL is: /admin/content/taxonomy/edit/vocabulary/6. So my Vocab ID is 6.
Determining column width is less exact. Here are the values I came up with while cross-browser testing:

cols width
1 100%
2 42%
3 26%
4 18%

Now that you've got that data at hand you can create the css you need.
For example for Vocab ID 6 I use this code to create 2 columns:

.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:42%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(2n+2) label.option {clear:left;}

The first declaration sets a width and formatting that creates two columns (Note width:42% above).
The second, clears the float after every 2nd checkbox label.
I don't need both statements, either one will work but using both covers all the bases.

3 columns would be:

.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:26%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:left;}

Note width:26% in the above example.

Here's all the css together including the 3 col. option (commented out) and a 1 col. option (for vocab ID: 11) which is displayed on the same page:

/* taxonomy-super-select taxonomy terms
---------------------------------------------------- */
.taxonomy-super-select-checkboxes .description {clear:left;}

/*put check boxes in 3 columns
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:26%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:left;}
*/
/*or 2 columns*/
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:42%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:none;}

/*set check boxes one per row*/
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-11].form-item label.option {clear:left;}

*Note: Change all taxonomy-super-select checkboxes

To display all taxonomy-super-select checkboxes in columns you would omit the vocabulary ID from the ‘starts with’ selector;

div[id^=edit-taxonomy-] 
instead of 
div[id^=edit-taxonomy-6]

Screenshots with more code here: http://pages.uoregon.edu/vid/2011/01/21/put-taxonomy-super-select-check-boxes-into-1-2-or-3-columns/
The theme I used is a customized Newsflash theme but I've tested it in Garland too. Cross-browser tested in most modern browsers: FF3*, IE7 & 8, Opera 10*, Safari 4 & 5*. * = tested on Mac and PC.

Comments

crossfish’s picture

I can't say enough about the Drupal community. It is posts like this that make building Drupal sites a pleasure. With the search engines out there, every question I've had over the past two months of climbing the learning cliff of Drupal has been answered. Kudos, hat tip, hip-hip (or hop since it's Easter :) hooray! for your inputs (and saving me a butt load of development time).