I've been trying to find a way to make some nice columns out of the checkbox groups especially when you have many checkboxes. This was the best solution i could find without hacking RSForm Pro (which is never a good idea . Take into consideration that the best solution for something like this is always done server-side. But in this case the options are limited with the built-in layout options in RSForm Pro for checkbox groups.

First: Create a form with a checkbox group component and make sure they flow/layout horizontally.

Second: Give the checkbox group an atribute of:

Your Form should now contain checkboxes in it and look similar to this:
Third: Add this code to the Javascript panel of the form. This will wrap the checkbox and it's corresponding label with a div having a class of "checkboxwrap".

Forth: You'll need to include the latest jQuery into your template.
Fifth: Style the class "checkboxwrap" with something like this:
There you have it! Thanks for the awesome component RS Joomla!

I know this post is a year old, but it is exactly what I need to do. I have completed all steps but where to I enter the code in step 5?

Hi. Place the checkboxwrap CSS code in one of your template's CSS files. I have an "extensions.css" file for my template where I placed that code.

Thanks to the original poster, this worked great!

Hi,

This works, but because of the jQuery-function, it conflicts with mootools... And without mootools, the menu doees not work, and also some modules stop functioning.

So, is it possible to do this without jQuery? Perhaps change the HTML-code in the form-layout, with auto-generation OFF ?

OR, is there a way to avoid the conflict between jQuery and MooTools? I've added this piece of code at page-header in my template:
Thanks!

Gerard

Hi again,

I solved this issue. The problem is that MooTools (the Javascript-library used by Joomla and in the Joomlart-templates) conflicts with jQuery. That is caused by the same use of the variable $ and can be repaired with using jQuery.noConflict. The jQuery.noConflict must be after loading the MooTools library and jQuery-library in your page.

So, move the scripts from step 3 and 4 to the HTML-layout-field (Your Form --> Properties --> Form Layout) in RSForm! Pro, as follows:

Off course, you have to set "Auto Generate Layout" to NO.. And remove the code of step 4 from the Javascript panel of the form.

Now after loading MooTools and jQuery, noConflict is called and then the script of step 4. The result is a four-column checkbox and a working MooTools: Menu, modules etc.

Some remarks about this fix:
This may cause a bit slower performance, because the jQuery-library is now only loaded when this form is displayed..

I tested it, but this does NOT work when you load the jquery.min.js in the head.php of a JAT3-template or in index.php of your template-directory. I do not really understand this, I think it has something to do with the order of all MooTools, jQuery stuff.

If other RSForm!Pro / javascript specialists see other disadvantages of this trick I'm very interested to hear it..

Thanks and success with this,

Gerard Verheij

Thanks for this code. It works for me within the Properties > Javascript window and got me closer to being able to format my checkboxes in columns. My problem is with using the float and width method rather than CSS column. With this method, my checkboxes are ordered like this:

A B
C D
E

What I want is:

A D
B E
C

In order to do this, we need a div container for all the .checkboxwrap classes, call it .checkboxgroup, so the HTML looks like:

...
<div class="formBody">
<div class="checkboxgroup">
<div class="checkboxwrap">...</div>
<div class="checkboxwrap">...</div>
...
</div>
</div>
...

Then, in our CSS, we replace the .checkboxwrap css with:

.checkboxgroup {
-moz-column-count: 2;
-moz-column-gap: 25px;
-webkit-column-count: 2;
-webkit-column-gap: 25px;
column-count: 2;
column-gap: 25px;
text-indent: -1.5em;
margin-left: 1.5em;
}

The problem is that simply using jQuery wrapAll groups every .checkboxwrap div into a single .checkboxgroup div in the position of the first instance of .checkboxwrap. So if you have 2 checkbox groups in your form, all the items from the second checkbox group will appear appended to the first checkbox group.

After hunting for awhile, I found a solution which works for me. After the script provided by gverheij, I include this:

<script>
jQuery(document).ready(function($){
$('.checkboxwrap').each(function() {
if ($(this.parentNode).hasClass('checkboxgroup')) return;
$(this).nextUntil(':not(.checkboxwrap)').andSelf().wrapAll("<div class='checkboxgroup'/>");
});
})
</script>

Now my .checkboxwraps are grouped in their correct positions within separate .checkboxgroup divs. I use the above CSS for .checkboxgroup to format them into true columns. I hope this helps and saves someone else some time.