Forums

I'm sorry for what is likely to be a very simple question, but I can't seem to figure it out.
I am working with some checkbox groups on v4 and when seen on the front end, they sort of wrap around. <see screenshot>

What I'm trying to accomplish is this:
Please select all that apply to your configuration
[ ] Selection 1
[ ] Selection 2
[ ] Selection 3
[ ] Selection 4

Unfortunately, what I'm getting is
Please select all that apply:
[ ] Selection 1 [ ] Selection 2 [ ] Selection 3 [ ]
Selection 4

Any help would be appreciated!

Hi lsoares2011 ,

It is a simple question. But the answer isn't simple.

First off - I'm assuming that this is ChronoForms v4 and not v3.2???

If it is then you can get this to work by editing the form HTML directly by clicking the name link in the Forms Manager. Once you have done this you will no longer be able to edit the form inputs in the Wizard Edit.

There is an alternative fix that will work with the Wizard but it involves hacking the code so I don't recommend it. I will post the code below so for reference though -- hopefully it will find it's way into a future release.

Bob

Hack to allow checkbox options to be in column or list form

In html_helper.php find the checkbox_group section around line 230 and replace it with this version:

			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['checked'])){
						$checked = $tag['checked'];
						unset($tag['checked']);
					}
				}
				$output .= "<div class='cf_check_option_block' id='cf_check_{$fieldname}'>";
				foreach($options as $k => $option){
					$output .= '<span class="cf_check_option"><input type="'.$fieldoptions['type'].'" name="'.$fieldname.'[]" id="'.$this->slug($fieldname.'-'.$k).'" value="'.$k.'"'.($checked == $k ? ' checked="checked"' : '').' class="'.$tag['class'].'">'."\n";
					$output .= '<label for="'.$this->slug($fieldname.'-'.$k).'">'.$option.'</label></span>'."\n";
				}
				$output .= "</div>";
				break;

Note - changes start from the $output .= "<div . . . line
This adds a identifiable <div> around the option block and <span>s around each option.

You need to re-save the form in Wizard Edit for these changes to be applied.

The add this CSS to the Form

span.cf_check_option {
  float:none;
  display:block;
}
div.cf_check_option_block {
  float:left;
}

This will display the options as a column; you can change the layout back to a row by changing display:block; to display:inline;

There is a unique id added to the cf_check_option_block <div> that you can use to have separate blocks display differently if that is needed

Bob

Later: there is an updated version of this code for CFv4 RC1.9 and including radio groups here

Hello everyone, especially developers and administrators Greyhead and maxpayne,always ready to answer to our problems.I tried the trick to put in column checkboxes and with a little modification the radio buttons. But now the problem is this : after filling the form,data are not saved in the DB table, and to confirm this If I select the field required for these values,js validation answer to me that the fields should not be empty...

I'm waiting your suggestions, in the meantime Goodnight from Italy (It's 3:00 a.m😢 😢 😢 )

Hi marketson,

The problem with not saving in the database for checkbox arrays is usually that you don't have 'Let ChronoForms handle array results' set to Yes on the form General tab.

In the validation I assume that you are using one-required rather than required? If so adding the <span> tags to get the vertical laignment may be causing the problem :-(

Bob

Greyhead I'm sorry but I think in the version I use the V4.0 RC1.7, there isn't the option 'Let ChronoForms handle array results'.I also use 1required validation for checkbox and required for radio buttons,the only options available, but I could not use them as long as you manage to fix the layout a bit.I might even let them in line, but they finish in the space below the label.

Waiting and thanks in advance

Hi Marketson,

In CFv4 it's the Handle Arrays action you need.

Sorry, I hadn't read far enough back to work out that this was CFv4 -- too many posts at the moment. I'l try to find time to take a look at the validation.

Bob

Ok no problem GreyHead, I just have to insert Handle Arrays action into OnSubmit space or I need to edit the two fields in configuration like "Delimiter" or "Skipped Fields"?

For other issues don't worry because I fixed by tweaking the css

Hi marketson,

I think you can leave the default values: there's a tiny comma in the Delimiter and you only need to skip entries if there are arrays that you don't want imploded (converted to strings).

Bob

My options are rather long and are wrapping to the next line so the checkbox is on a line by itself and then the text is on the next. Where can I modify the text length or make the text stay on the same line as the checkbox?

I have a screenshot included as an example.

Hi Cpointcc,

You could try putting <br /> tags in the labels; or maybe moving the explanations into notes on the next line (that would require some custom HTML); or use tooltips - I think that would also require custom code.

Bob

Hello,

I am using Chronoforms 4.0 RC3.4.1

I am trying to get some check boxes in vertical alignment.

Based on the directions above I need to hack the html_helper.php file but I can't find it.

I am wondering if I am going about this the right way.

Was there a change in the newer version of Chronoforms to make this simpler?

Thanks, Chuck

Hi Chuck,

Please start by upgrading to CFv4 RC3.5.1 - I don't recall any changes here but there many have been.

The helper file is at administrator/components/com_chronoforms/helpers/html_helper.php

Bob

Hi Bob,

I put the code in and it sort of made the changes.

Please see attached image.

Not sure if it's me or the code.

Thanks, Chuck

Hi Chuck,

That's not good, the boxes aren't on the same line as the labels. Please post a link to the form so I can take a quick look.

Bob

Thanks for taking a look bob, Chuck

http://temp.modwest.com/shareyourmontanariverstories.com/index.php?option=com_chronoforms&view=form&Itemid=494

Hi Chuck,

It looks as though this happens with the Tight layout on. Please try adding this to a Load CSS action

.cfdiv_checkboxgroup label, .cfdiv_radio label, .cfdiv_checkboxgroup input, .cfdiv_radio input {
    float: none !important;
}

It seems to do the trick . . .

Bob

Hi There,

Thanks for the code, it worked great except for on small detail.

The title alignment is off.

Here is a link
http://temp.modwest.com/shareyourmontanariverstories.com/index.php?option=com_chronoforms&view=form&Itemid=494

Thanks so much for the help,
Chuck

Hi Chuck,

Please try this CSS

.cfdiv_checkboxgroup label:first-child, .cfdiv_radio label:first-child {
  display: block;
}

Bob