CheckBoxes Group

I managed to get my CheckBoxes Group in line with the rest of my form, still don't understand why the whole form is in line except for this group?

I will show you what I mean with some pictures.

As you can see, the group is horizontally lined out with the "title": Consumpties


After saving it looks like this:


Now I split up the radio and checkbox in the /* input types */ section on line 71 in frontforms_tight.css and made a margin-left of 150px:

/* input types */
.ccms_form_element input[type="checkbox"]{
padding: 0 0 0 0 !important; background-color: transparent; border-color: transparent; margin: 10px 5px; margin-left: 150px; clear: none;
}

/*.ccms_form_element input[type="radio"] { border-color: transparent; margin: 8px 9px 0 0; clear: none; }*/
.ccms_form_element input[type="radio"] { padding: 0 0 0 0 !important; background-color: transparent; border-color: transparent; margin: 10px 5px 10px 5px ; clear: none; }

Now my choices are in line with the rest of the form again: vertically! But still not horizonatlly with: Consumpties

Any idea where I can change that so it will be like this on my website also?


Thnx in advance.

When this is done I can make a Dutch translation for you of the installation and how to setup a form!

As you can see it is possbile when I choose for the horizontal option:

Hi @yourservice,

I think I have an answer for this but it's not straightforward and required a little hack to the code code. In administrator/components/com_chronoforms/helpers/htmlhelper.php look for this block of code around line 261 and add the two lines shown near the end.

			case 'checkbox_group':
				unset($fieldoptions['value']);
				$fieldoptions['type'] = 'checkbox';
				$options = array();
				if(isset($tag['options']) && is_array($tag['options'])){
					$options = $tag['options'];
					unset($tag['options']);
					$checked = false;
					if(isset($tag['selected'])){
						$checked = explode(",", $tag['selected']);
						unset($tag['selected']);
					}
				}
				if(isset($tag['ghost'])){
					if((bool)$tag['ghost'] === true){
						$output .= '<input type="hidden" name="'.$fieldname.'" value="'.$tag['ghost_value'].'" alt="ghost" />'."\n";
					}
					unset($tag['ghost']);
					unset($tag['ghost_value']);
				}
				$output .= "<div class='cfdiv_checkboxgroup_options'>"; // <<-- add this line
				foreach($options as $k => $option){
					$output .= '<input type="'.$fieldoptions['type'].'" name="'.$fieldname.'[]" id="'.$this->slug($fieldname.'-'.$k).'" title="'.$tag['title'].'" value="'.$k.'"'.(in_array($k, $checked) ? ' checked="checked"' : '').' class="'.$tag['class'].'">'."\n";
					$output .= '<label for="'.$this->slug($fieldname.'-'.$k).'">'.$option.'</label>'."\n";
				}
				$output .= '</div>'; // <<-- add this line
				break;

This makes the options block addressable in CSS and the following CSS in a Load CSS action should do the trick.

div.cfdiv_checkboxgroup_options {
	float:left;
}

If you want different checkbox groups to display differently you can use the parent div id to discriminate between them.

Bob

PS A similar hack is possible for radio button groups - the equivalent code block is around line 234

For reference here are a series of images showing the different checkbox group displays.
[attachment=5]13-11-2011 13-20-09.png[/attachment]
[attachment=4]<!-- ia4 -->13-11-2011 13-22-30.png<!-- ia4 -->[/attachment]
[attachment=3]13-11-2011 13-23-48.png[/attachment]
[attachment=2]13-11-2011 13-15-16.png[/attachment]
[attachment=1]13-11-2011 13-25-34.png[/attachment]
[attachment=0]13-11-2011 15-10-35.png[/attachment]

Thnx a lot, this really does the trick!

But now when I submit my form (e-mail) I get:

Consumpties {input_consumpties}, instead of the checked options.

Same goes for the textfield:

Speciale wensen {input_speciale wensen}, instead of the real text typed by the requester.

Could you look into that as well or am I doing something wrong here?

Kind regards,

@yourservice

Hi @yourservice,

For the checkbox group you need to drag a Handle Arrays action into the OnSubmit event and move it up before the Email action.

For the text area you need to remove the space in the name.

Bob

Thnx for your quick respons!

Checkbox works perfect now, what a nice program this is!

You really thought things over!

Now the text area is another story.

I removed the space, emptied the cache, still the same.
I removed the text area, placed a new one, saved it, emptied my cache and it still says: {input_speciale wensen}?

That's odd?!?

Hi @yourservice,

Have you updated the Email template?

Bob

THAT's it Bob, you're a genius!🙂

Thnx so far!