Radio Buttons option each on a new line

Hi there

Loving the software - finally done with Virtuemart

I have set up some radio buttons with different options that the customer can click on

However they are all on one line - how do I change it so there that each radio button appears on a new line?

If I have not articulated this well enough I can send a picture - do I need to edit a css or is it simpler than that?

Higgo

Hi there - thanks for the reponse

I managed to get the radio options on different lines by adding this bit of code


.hikashop_product_characteristics_table td input {
float: left;
vertical-align: middle;
margin-left: 5px;
margin-top: -3px;
margin-right: 10px;
}

However as a very amateur coder I am stuck again

How do I increase the line spacing between the options? I have managed to do this but only for the radio buttons and not the labels at the same time..

Hi there nicolas, I would like to know the answer to the rdio buttons on a seperate line each above. My test site is at redcell.co.uk/voxel/shop/product/1-kru-sport-pro-iso
that is the page that has the radio buttons on

Is it also possible to have the Caption above the Radio buttons and the options in total beside each other?

Like this:

    Option 1     |     Option 2     |     Option 3
 O Radio 1-1  | O Radio 2-1  | O Radio 3-1
 O Radio 1-2  | O Radio 2-2  | O Radio 3-2
 O Radio 1-3  |                         | O Radio 3-3
                         |                         | O Radio 3-4

or Horizontal but at least vertically aligned radio buttons:

Option 1 | O Radio 1-1 | O Radio 2-1 | O Radio 3-1
Option 2 | O Radio 1-2 | O Radio 2-2 | O Radio 3-2
Option 3 | O Radio 1-3 | xxxxxxxxxxxxx | O Radio 3-3

This would require that each radio button in generated into its own TD cell but I dont know where to find the code, that generates these. Under views there is show_block_charateristic but its code isn't quite helpful. I would actually appreciate the horizontal variant with fixed min-width for each radio option.

Kind regards,
Adrian.

What would these CSS changes look like for the fixed label width?

Thank you for the tip. I was trying that before but forgot the display and float attribute. that way it ignored my label width for some reason. got it working now with the following css modifications:

.hikashop_product_characteristic_chooser{
	text-align: left;
}
.hikashop_product_characteristics_table{
	width: 100%;
	display: block;
	vertical-align: middle;
	line-height: 25px;
}
.hikashop_product_characteristics_table input{
	float:left;
	height: 18px;
}
.hikashop_product_characteristics_table label{
	width: 93px;
	white-space:nowrap;
	padding-left: 2px;
	float:left;
}