Put Taxonomy Super-Select Check Boxes into 1, 2 or 3 Columns

I really like Taxonomy Super Select (http://drupal.org/project/taxonomy_super_select) but I’m not crazy about the jumbled display of the check boxes and labels.

So I came up with some css that puts everything into columns:

Here’s the default display:

Here we see 2 cols on top and 1 col in the next group:
Here’s 3 col’s on top:

The big challenge was determining how to apply different styles to different check box fieldsets. The key was the css ‘starts with’ selector; i.e:


My larger group of options all contain div with ID’s that start with “edit-taxonomy-6”. And the smaller one “edit-taxonomy-11”. The 6 and 11 represent the Vocabulary ID for those taxonomy terms.

So to make 3 columns I used the ‘starts with’ selector and made the width of the checkbox labels 26% and then I combined the ‘starts with’ selector with the nth-of-type() selector to clear the float after every third label:

div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:left;} 

Using both is redundant. It seems to work with just the percentage or just the 3n+2 method. I used both to cover my bases across browsers.

For 2 columns I set the width of the labels at 42% and then assigned ‘clear:left’ after every 2nd div.

div[id^=edit-taxonomy-6].form-item:nth-of-type(2n+2) label.option {clear:left;}

*Note: I choose 42% by browser testing this. It worked well in (on Mac 10.6 unless noted) FF (Mac&PC Win7), Opera, Chrome, IE8 (PC Win7) and Safari. Initially I used 43% but Safari wanted 42%. My customers don’t use Safari for editing pages & selecting taxonomy but the lowest common denominator won out.

Then for 1 column I didn’t mess with the label widths and I just cleared the float on every label in the group.

.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-11].form-item label.option {clear:left;}

No percentage needed but you could do 100% if you wanted.

By the way 4 columns is around 18% and/or 4n+2.

3, 2 and 1 column code:

/* 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(2n+2) label.option {clear:left;}

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

A couple of notes on the css:

  • The last bit of css on the % line is: margin-left:3.5%; text-indent:-24px. That takes care of word wrapping with-in the label. This way, it looks like the text is inset/inside Checkbox with inset label instead of wrapping under the checkbox.
    Checkbox with wrapped label
  • If you wanted to arbitrarily put all taxonomy-super-select checkboxes in to columns you would omit the vocabulary ID from the ‘starts with’ selector:
    .taxonomy-super-select-checkboxes div[id^=edit-taxonomy-].form-item label.option {...}

So to use this, you need to be able to determine the id’s of your checkboxes / vocabulary (the many web developer tools can help with that on the browser-side) and have access to a stylesheet.

I’m not sure how this could be included in the module to allow for choosing the column layout of each instance but it sure would be nice.
Perhaps the user could choose the number of columns or the width percentage of the columns using the tested % as a guideline: (col: width || 1: 100%, 2: 42%, 3: 26%)

In fact, integration into the module may warrant eliminating the dynamic css selectors. In that case, more form overrides would be in order.
Adding a class to the markup, surrounding the check boxes, for example:

<div class="edit-taxonomy-6">...</div>

would simplify the css declaration. ie.

.taxonomy-super-select-checkboxes .edit-taxonomy-6 .form-item label.option {width:42%;...} 

Then, looking closer at keeping the the percentage and nth-of-type(3n+2) would be in order too.

Trackbacks Comments
  • stephen mosley says:

    Nice addition, the styling makes a HUGE difference. Thanks for the walk-through and explanation.

    • Sue Beckwith says:

      Steven, thank you so much for this! I have searched high and low for a cleaner way to display user choices in the create content screen. You have provided it! Now if someone would just make CKEditor more usable for end-users. ! Thanks again.

  • alibama says:

    Aloha Vid = nice work, also fwiw have added your blog’s rss onto drupalpress (the site linked above) as I’m trying to keep up with the other higher-ed drupal blogs = rock on & great work

  • Vid says:

    I have recently noticed when I use it that 3 column css override in my openAtrium site I can’t select some checkboxes in the first column, especially when I’m using an iPad. I haven’t looked into it yet, but if anyone experiences the same thing then I can start investigating it.
    It’s probably a positioning / z-index overlap issue.

    • Vid says:

      I found the problem. In the Ginko theme div’s with the class: form-item have some default padding; 5 or 9px. So I reset that and all the checkboxes are checkable again.

      .taxonomy-super-select-checkboxes div.form-item[id^="edit-taxonomy-5"].form-item { padding:0; }

Leave a Reply to stephen mosley