Displaying radio buttons horizontally - How do I change the buttons from displaying vertically to displaying horizontally

ArdeviaForum

• Created August 18, 2016 14:19

Original Post by Sandy (Imported from Ardevia Forum)

I have a field in my form that has a few options that I am presenting as radio buttons, however, the default is displaying them vertically whereas I would like them to display horizontally.

 

If someone could please help out with this.

1

• 

  ArdeviaForum

  • August 18, 2016 17:20

  Original Post by Vitaliy Zadorozhnyy (Imported from Ardevia Forum)

  Hi Sandy,
  Yes you can do this enough easy. Just add "Execute Script Action" in "Form Load Actions".

  Code:

  var rows = jQuery('span[fieldname="FieldName"] table tr');
  rows.css('display', 'inline-block');
  

   

   

  Just put instead of "FieldName" your radio field internal name.
  Let us know if it was working for you.

  1
• 

  ArdeviaForum

  • August 18, 2016 17:21

  Original Post by Sandy (Imported from Ardevia Forum)

  Thank You Vitaliy, almost perfect....

   

  How do I insert spacing between the text related to the first radio button and the second radio button?

   

  Cheers Sandy

  0
• 

  ArdeviaForum

  • August 18, 2016 17:22

  Original Post by Taras Lozynskyy (Imported from Ardevia Forum)

  Hi Sandy. Please this to the end of code

  Code:

  rows.css('margin-right', '5px');
  

  0
• 

  Christof

  • September 05, 2022 08:38
  • Edited

  Due to requests how to achieve this formatting on skybow Modern Forms we provide here this style:

  1. Add a new Style to your Choice field:
  

  2. Paste this style rule at end of style editor:

  .sb-field-input .ms-ChoiceField {
    display: inline-block;
    margin-right: 15px;
  }

  

  1

Please sign in to leave a comment.