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,

You can do it by adding some CSS yes.
Could you give a link to the page where you have them so that we can give you the CSS you should use ?

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..

Could you give a link to the page where you have them so that we can give you the CSS you should use ?

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

It's in the documentation:
www.hikashop.com/en/support/documentatio...racteristic_vertical

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.

I suppose that you should fix the width of each radio label to be constant (so option number 2) with just CSS without changing any code in HikaShop.
If you could give a link to a page with that display, I could look at giving you the exact CSS to use.

Otherwise, the code displaying the characteristics is in the file administrator/components/com_hikashop/types/characteristic.php
That's explained in the characteristics display override section of the developer's documentation:
www.hikashop.com/en/support/documentatio...tation.html#override

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:

Kind regards,
Adrian.

Thanks for sharing the CSS you used.