Radio button/Checkbox display

I am having problems with using radio buttons and checkboxes. They display horizontally when published and I would like them vertical. I have tried amending the frontforms.css (line 78) to include display: block, but no joy. Am fairly novice when it comes to CSS, so any help would be greatly appreciated.

BTW am using joomla 1.5.22 and Chronoforms 4

Hi Sainsy,

I posted a hack that allows you to change this here

Bob

Fantastic - got the checkboxes working, but now the radio buttons need changing too.
I guess they inherit their style from the same place - can I use the same code to modify the radio buttons.

...am also running into problems betweeen Firefox and IE. I have read in other threads that previous versions of chronoforms use a different CSS file (under themes) - is that not the case in V4?

The form I am constructing is at:
http://speakingspace.co.uk/index.php?option=com_chronoforms&Itemid=56

Any ideas?

Hi Sainsy,

There don't appear to be any separate IE CSS files in CFv4

I can see the problem with the checkboxes in IE and have just spent some time trying to work out what is happening . . . with no success :-(

It might be worth trying replacing the <span> tag with a <div>. I tested this with the IE9 Developer tools without success but it might work in the page source.

For your earlier post - a similar hack should work for a radio button array.

Bob

Hi, could you help me with this similar hack for radio button?
What should I change to make display of radio buttons vertical?

Ok, I tried to fix it, but similar hack doesn't work properly...

In html_helper.php I modified radio section (line 218):

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).'" value="'.$k.'" class="'.$tag['class'].'">'."\n";
					$output .= '<label for="'.$this->slug($fieldname.'-'.$k).'">'.$option.'</label></span>'."\n";
				}
				 $output .= "</div>";
				break;

And I add CSS to the Form:

span.cf_radio_option {
  float:none;
  display:block;
}
div.cf_radio_option_block {
  float:left;
}

All is OK if Option "text multi line format" size is 1-6. If it's bigger, everything will look like in attachment. Should I add something else?

I clean Label Text and I add Header Text because I want to have this text in the different line (above radio). Is it possible to modify Label Text position?

I'm using Joomla! 1.6 and Chronoforms v4

Similar issue to Harry above, I'm using 4 RC1.9

With chrome, I get this:


With IE8, I still get horizontal (and the off-vertical-center labels):