[Skip to main content](#vessel-content) # Radio Buttons option each on a new line ## - **[higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile")** - [![higgoboss's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6589-higgoboss "View higgoboss's Profile") Topic Author - [ Offline](/forum/user/6589-higgoboss) Less More - Posts: 8 - Thank you received: 0 - - 14 years 7 months ago - 14 years 7 months ago [\#42591](#42591) by [higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile") *[Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#42591 "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")* was created by *[higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile")* 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 Last edit: 14 years 7 months ago by [higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile"). Reason: more info Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 14 years 7 months ago [\#42723](#42723) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#42723 "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 ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile")** - [![higgoboss's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6589-higgoboss "View higgoboss's Profile") Topic Author - [ Offline](/forum/user/6589-higgoboss) Less More - Posts: 8 - Thank you received: 0 - - 14 years 7 months ago [\#42938](#42938) by [higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile") Replied by *[higgoboss](/forum/user/6589-higgoboss "View higgoboss's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#42938 "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 ![:(](/media/kunena/emoticons/5.png ":(") 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.. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 14 years 7 months ago [\#43076](#43076) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#43076 "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")* Could you give a link to the page where you have them so that we can give you the CSS you should use ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[rikatos](/forum/user/1634-rikatos "View rikatos's Profile")** - [![rikatos's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/1634-rikatos "View rikatos's Profile") - [ Offline](/forum/user/1634-rikatos) Less More - Posts: 179 - Thank you received: 17 - - - [](http://oceansafety.com) - 14 years 5 months ago [\#49232](#49232) by [rikatos](/forum/user/1634-rikatos "View rikatos's Profile") Replied by *[rikatos](/forum/user/1634-rikatos "View rikatos's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49232 "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 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](http://redcell.co.uk/voxel/shop/product/1-kru-sport-pro-iso) that is the page that has the radio buttons on ![:)](/media/kunena/emoticons/8.png ":)") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 14 years 5 months ago [\#49290](#49290) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49290 "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")* It's in the documentation: [ www.hikashop.com/en/support/documentatio...racteristic\_vertical](http://www.hikashop.com/en/support/documentation/integrated-documentation/84-css-styling.html#characteristic_vertical) The following user(s) said Thank You: [rikatos](/forum/user/1634-rikatos "View rikatos's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[4drian](/forum/user/7395-4drian "View 4drian's Profile")** - [![4drian's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/7395-4drian "View 4drian's Profile") - [ Offline](/forum/user/7395-4drian) Less More - Posts: 7 - Thank you received: 0 - - 14 years 5 months ago - 14 years 5 months ago [\#49683](#49683) by [4drian](/forum/user/7395-4drian "View 4drian's Profile") Replied by *[4drian](/forum/user/7395-4drian "View 4drian's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49683 "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")* 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. Last edit: 14 years 5 months ago by [4drian](/forum/user/7395-4drian "View 4drian's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 14 years 5 months ago [\#49757](#49757) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49757 "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")* 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](http://www.hikashop.com/en/support/documentation/62-hikashop-developer-documentation.html#override) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[R\_Fey](/forum/user/7323-r-fey "View R_Fey's Profile")** - [![R_Fey's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/7323-r-fey "View R_Fey's Profile") - [ Offline](/forum/user/7323-r-fey) Less More - Posts: 7 - Thank you received: 1 - - 14 years 5 months ago [\#49778](#49778) by [R\_Fey](/forum/user/7323-r-fey "View R_Fey's Profile") Replied by *[R\_Fey](/forum/user/7323-r-fey "View R_Fey's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49778 "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")* What would these CSS changes look like for the fixed label width? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[4drian](/forum/user/7395-4drian "View 4drian's Profile")** - [![4drian's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/7395-4drian "View 4drian's Profile") - [ Offline](/forum/user/7395-4drian) Less More - Posts: 7 - Thank you received: 0 - - 14 years 5 months ago [\#49801](#49801) by [4drian](/forum/user/7395-4drian "View 4drian's Profile") Replied by *[4drian](/forum/user/7395-4drian "View 4drian's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49801 "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")* 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: Code: .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; } Kind regards, Adrian. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86290 - Thank you received: 14268 - - 14 years 5 months ago [\#49840](#49840) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Radio Buttons option each on a new line](/forum/4-how-to/42591-radio-buttons-option-each-on-a-new-line#49840 "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")* Thanks for sharing the CSS you used. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQyNTkxLXJhZGlvLWJ1dHRvbnMtb3B0aW9uLWVhY2gtb24tYS1uZXctbGluZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.333 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)