Displaying categories in multiple columns

Question

I'm using a safecracker form to edit a channel entry. I needed checkboxes to display which categories were assigned to the entry. I've achieved this using the code below

    {exp:safecracker channel="projects"  entry_id="{segment_3}"   return="/projects/detail/{segment_3}"}
                       {categories group_id="4"}

 <p> <label for="{category_name}">{category_name}</label>
  <input type="checkbox" name="category[]" id="{category_name}" value="{category_id}"{checked}></p>

       {/categories}
{/exp:safecracker}

Here comes my problem. I need them to display in multiple columns, not just one long list - originally I was using exp:channel tags with show="" to display some of the categories and then repeating it in another div with the rest of the categories.

<div>
{exp:channel:categories channel="projects" category_group="4" show="14|15|16|17|18"}
</div>

<div>
{exp:channel:categories channel="projects" category_group="4" show="19|20|21|22|23|24"}
</div>

However the page only remembers the checked categories if I use {categories} instead of {exp:categories}. The documentation says I can still use {categories show="14|15|etc"} but it doesn't work.

Anybody have any ideas of what I'm doing wrong? Thanks!

Answer 1

That's not a very efficient way of doing things as you're doubling your DB queries unnecessarily by calling {exp:channel:categories} twice. It also forces you to update your template markup whenever you add new categories in the future.

Generally speaking the simplest means of achieving a two column layout would be via CSS:

.my_categories p {
    float: left;
    width: 50%;
}

If you want to apply different styling to the left and right columns you can use EE's {switch} tag:

<div class="my_categories">
    {categories group_id="4"}
    <p class="{switch='odd|even'}">
        <label for="{category_name}">{category_name}</label>
        <input type="checkbox" name="category[]" id="{category_name}" value="{category_id}"{checked}>
    </p>
    {/categories}
</div>

Answer 2

I think Dom's got the better answer since it relies on built-in functionality, but I'd also like to recommend Column-bo, a great (and free!) plugin that makes light work of splitting entries into columns.