Checkboxes in multiple columns

[ShrapNel]

Hi Everyone...

I am needing to have a form on my site which will consist of some 150 check boxes - is it possible to get these checkboxes to appear on my website in specifically spaced columns? It will most likely be three columns.

Thanks in advance for any help!

Regards

[okozaar]

Hi Everyone...

I am needing to have a form on my site which will consist of some 150 check boxes - is it possible to get these checkboxes to appear on my website in specifically spaced columns? It will most likely be three columns.

Thanks in advance for any help!

Regards

Hi,

I've got the same problem. I need two or three columns.
if you got an answer please tell me..

thanks

okozaar

[rasmark]

Hello,

I would like to know how to do this also please.
Inline fieldsets or multi column layout.

Thanks.

[Samaroo]

You can do this using CSS. A better solution would be for it to be a part of ckForms.

Here's my CSS to display the checkboxes in two columns:

Code: Select all

.formW {
        width: 65em;
}

.cbox_col1_label {
        position:relative;
        left:19em;
        top:-2em;
        width:30%;
        height:1em;
}

.cbox_col1_field {
        position:relative;
        top:-2em;
        left:-3em;
}

.cbox_col2_label {
        position:relative;
        top: -4em;
        left:40em;
        width:30%;
}

.cbox_col2_field {
        position:relative;
        top: -4em;
        left:18em;
}

I'll walk you through the code, but you'll need to be familiar with CSS to understand this. I'm not a CSS expert but I understand most of the basics. Try to visualise the form is a table with four columns to help with your understanding.

- .formW sets the width of the form on the screen or the width of the "table".
- .cbox_col1_label positions the label for the first checkbox in the second column of the form and sets the width of that column.
- .cbox_col1_field positions the first checkbox in the first column of the form.
- .cbox_col2_label positions the label for the second checkbox in the fourth column of the form and sets the width of that column.
- .cbox_col2_field positions the second checkbox in the third column of the form.

You have to know which of the checkboxes you want in the different columns so you can set the CSS class when creating the field.

You will have to modify the numbers to get what you want to suit your form. If you want three columns add .cbox_col3_label and .cbox_col3_field and tweak the numbers as necessary.

I am not a CSS expert so if someone can make this more efficient then please post the better code.

Also, pedrino perhaps you can incorporate this into ckForms???

[okozaar]

Thank Samaroo

It's help me to improve my understanding of CSS.... (i' m a newbie too)
but it seems that In this way, I could only have two column for 2 different checkbox.

Maybe i've made a mistake. if this is please help me. But it's looks like CKForm allow only to assign a pair of (field/label) class by field. it will be nice if we could configure it in the details of (value/label) class.....

Because I need to have two or more columns for different pair (value/label) in the same checkbox ?

.....

[onglai]

Hi Samaroo,

Thank you for the solution but, where to add this CSS in CKForm?

Thanks again