V4 - Display radio buttons vertically - help!

Hello,

I have got Chronoforms v4 fro Joomla 1.6 and I have looked at the below article post:
http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&p=66229#p66229

and I am a little confused on where the CSS coding should go.

Could someone point me in the right direction please?

Many Thanks,
MTP

Hi MTP,

The CSS goes in a Load CSS action in the form OnLoad event.

Bob

Hi,

Thanks for the reply. I have added in the CSS coding and still nothing happens.

Am I doing something wrong?

Many Thanks,
MTP

Hi MTP,

And you've also made the code hack?

Please post a link to the form so I can take a quick look.

Bob

Hi,

Thanks for the reply.

My site is only local on a laptop I will send you the form in a PM.

Thanks,
MTP

Hi MTP,

OK. You need to apply the changes in the htmlhelper.php file to the radio block (as well as the checkbox group block). In the current CFv4 RC1.9 version the changed code looks like this:

			case 'radio':
				unset($fieldoptions['value']);
				$options = array();
				if(isset($tag['options']) && is_array($tag['options'])){
					$options = $tag['options'];
					unset($tag['options']);
				}
				$output .= "<div class='cf_radio_option_block' id='cf_radio_{$fieldname}'>";
				foreach($options as $k => $option){
					$output .= '<span class="cf_radio_option"><input type="'.$fieldoptions['type'].'" name="'.$fieldname.'" id="'.$this->slug($fieldname.'-'.$k).'" title="'.$tag['title'].'" value="'.$k.'" class="'.$tag['class'].'">'."\n";
					$output .= '<label for="'.$this->slug($fieldname.'-'.$k).'">'.$option.'</label></span>'."\n";
				}
				$output .= '</div>';
				break;
			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']);
					}
				}
				$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).'" title="'.$tag['title'].'" value="'.$k.'"'.(in_array($k, $checked) ? ' checked="checked"' : '').' class="'.$tag['class'].'">'."\n";
					$output .= '<label for="'.$this->slug($fieldname.'-'.$k).'">'.$option.'</label></span>'."\n";
				}
				$output .= '</div>';
				break;

and to tweak the CSS quite a bit and this is what I ended up with for the radio box groups in your form; you may need to adjust this in your template.

span.cf_radio_option {
  float:none;
  display:block;
  //margin-left: 0px;
  clear: both;
}
div.cf_radio_option_block {
  float:left;
}
div.cf_radio_option_block input {
  float: none;
  margin: 0 6px;
}
div.cf_radio_option_block label {
  float: none;
}

Bob

Hi,

Thank you ever so much it worked!!!!

Thank you again!!!
MTP

I have had the same problem with horisontal lines of checkboxes and their labels for a while, and found this topic about it.
I don't know if I'm doing this right. I'm pasting code into the "load css" field in wizard edit of my form, but nothing happens frontend.
You mention a htmlhelper.php file? Do I need to locate this and paste the code somewhere specific in that file?

I have enabled Wizard-editing, not custom-editing...
I'm using CF v4 and Joomla! 1.6

You can see the frontend of my form at http://druensvenner.cloudaccess.net/bliv-medlem/blanket.html - I'd PM you the form-code if I knew how to find it... Sorry for the inconvenience, I'm still a novice in this area

Hi Afrobent,

Yes use the following code in the "Load CSS" action/element on your form setting through the wizard editing.

span.cf_radio_option {
float:none;
display:block;
//margin-left: 0px;
clear: both;
}
div.cf_radio_option_block {
float:left;
}
div.cf_radio_option_block input {
float: none;
margin: 0 6px;
}
div.cf_radio_option_block label {
float: none;
}



Also yes, you do need to copy the coding into the html helper.php file. That is why nothing happens in the frontend yet.
The html helper.php file is located in a location like this. I use XAMPP on my Joomla but yours could be different: C:\xampp\htdocs\(joomla folder name)\administrator\components\com_chronoforms\helpers\ and the file is in there. Use the instructions that Greyhead put above your comment if you get stuck on the coding instructions.

Hope this helps.

I think I need to grasp some other basics here before I can adjust the radiobuttons-code
How do I open my page with XAMPP? I downloaded the program and I guess I need some sort of "homepage"-folder with all the stuff I'm working on, but I'm doing it online.
How do I edit locally and apply those changes online?
I'm new at this, thankyou so much for your help and patience!
Regards - Anders

Hi Afrobent,

Please check the help for FileZilla in XAMPP - or, if XAMPP is on your local PC, you can browse to the folders directly with Windows Explorer.

But you need either of these to do what MTP is suggesting, that just needs admin access to your site and the ChronoForms Forms Manager.

Bob

Just a note, starting from V4RC2.0 the radio buttons and checkboxes should have a new "vertical" setting to be configured in the wizard.

Regards,
Max