Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms

The requirement is to arrange choice fields of Radio buttons horizontally in a SharePoint 2013 custom list form: Arrange Choice Field Radio Buttons Horizontally

How to arrange choice field options Horizontally?

Step 1: Create a new Custom list form(Say: New.aspx) using SharePoint Designer, edit the page in SharePoint designer, Find and wrap your choice field in <Span> tag to assign it a unique ID. E.g.optRegType.

<span id="optReqType">
 <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Change_x0020_Request_x0020_Type" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Change_x0020_Request_x0020_Type')}"/>
       <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Change_x0020_Request_x0020_Type" ControlMode="New"/>
</span>

Step 2: In the custom list form, find the tag <AdditionalPageHead> and add this code just below it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

  $(document).ready(function() {
 var firstRadio = $("#optReqType table tbody tr td .ms-RadioText:eq(0)");
 $("#optReqType table tbody tr td .ms-RadioText:gt(0)").appendTo($(firstRadio));

  });
</script> 

What If you have Multiple Choice Fields?

When you have multiple choice fields in the form, it’s better to create a function to arrange them horizontally.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

 function alignOptions(fieldName)
 {
   var firstRadio = $("#"+fieldName +" table tbody tr td .ms-RadioText:eq(0)");
   $("#"+fieldName +" table tbody tr td .ms-RadioText:gt(0)").appendTo($(firstRadio));
 }
 
  $(document).ready(function() {
    //Call function to arrange Radio buttons horizontally
    alignOptions("optChgImpact");
    alignOptions("optChgPriority");
  });
</script>

Here is my screen:

SharePoint Choice Field Options Horizontal Alignment

SPServices Framework also offers this functionality: http://sympmarc.github.io/SPServices/value-added/SPArrangeChoices.html

Salaudeen Rajack

Information Technology Professional with Two decades of SharePoint Experience.

25 thoughts on “Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms

  • January 25, 2019 at 3:18 PM

    Thank you so much! I spent 2 days trying to get the SPServices.min.js to work and no luck. Your code fixed my issue in just 5 minutes!

    Reply
  • December 20, 2018 at 10:59 PM

    Use the same SPAN ID in the function filed-
    span id=”horizontalchoiceField1″
    span id=”horizontalchoiceField2″
    span id=”horizontalchoiceField3″

    under function change/add you span ID
    //Call function to arrange Radio buttons horizontally
    alignOptions(“horizontalchoiceField1”);
    alignOptions(“horizontalchoiceField2”);
    alignOptions(“horizontalchoiceField3”);

    This should work.

    Reply
  • December 19, 2018 at 4:59 PM

    Can you please provide a sample of the script/code for using in a list with multiple choice(radio buttons) in a list.
    I change the span id to optreq1, optreq2 ? and it does not work
    its not simple 🙁 please help

    Reply
  • December 13, 2018 at 8:27 PM

    Wow, It worked for one Radio button.
    However when i tried to use it on a list with multiple radio button. It does not work
    I tried giving different SPAN ID for each column
    ex:
    span id=”horizontalchoiceField1″
    span id=”horizontalchoiceField2″
    span id=”horizontalchoiceField3″
    Not sure if this what is suppose to be done. Can you help with this..

    Reply
  • April 4, 2018 at 9:34 AM

    woow, it really helped:)
    i have a question here, can i control the diection? like the 1st option to be rightside without re-edit the column itself

    Reply
  • April 4, 2018 at 9:32 AM

    wooooow, i was looking for something like this, it really helped

    Reply
  • February 28, 2018 at 6:56 PM

    Just after I posted my previous comment about sorting across vs down, I realized I am in control of the order by how things are entered in the choice column. D’oh! So I rebuilt my list and the columns now come out in the sort order I want.

    Thanks!

    Reply
  • February 28, 2018 at 6:43 PM

    This is good – and like all of the options I’ve seen, it sorts by going across, then down. Unfortunately, the (English reading) human eye has been trained to go down columns first, then up to the next one.

    It would be great to find a way to sort things in that form, down the columns. It would require reading the choices into an array to count them, then display using a loop. I’ll work on it.

    Reply
  • January 2, 2018 at 6:39 PM

    I cannot get this to work for me. It is not wrapping any of the choice radiobuttons. I have a large list of over 200 choices and need to have them displayed better. Any help would be appreciated.

    Reply
  • May 27, 2017 at 1:58 PM

    Hi Salaudeen! Thanks for sharing your knowledge. I have a requirement for using radio buttons such that on clicking a choice, i should be able to fill a ‘start date’ and ‘end date’ field side by side next to the choice. How can I do this?
    Regards,
    Pradeep

    Reply
    • June 5, 2017 at 11:11 AM

      Well, jQuery can do this! Start here:
      https://www.sharepointdiary.com/2013/04/show-or-hide-list-form-field-based-on-another-field-value.html
      https://www.sharepointdiary.com/2013/06/get-query-string-and-set-list-form-field-value.html

      Reply
  • November 24, 2016 at 4:40 AM

    How it works if i have more one question of multiple choice radiobutton???
    should I change the span id become optreq1, optreq2? and var become firstradio, secondradio?
    its not simple 🙁

    Reply
    • November 27, 2016 at 6:48 AM

      Simple! Wrap your choice fields inside different SPAN IDs and Use the code under “What If you have Multiple Choice Fields?” section!

      Reply
  • October 25, 2016 at 9:24 PM

    Is there any way I can add more spacing between the radio buttons?

    Reply
    • October 26, 2016 at 10:23 AM

      Sure, Add this CSS to the page:

      #ProjectType Label, .ms-RadioText{
      padding-left: 2px;
      }
      #ProjectType .ms-RadioText{
      padding-left: 10px;
      }

      Don’t forget to change the radio group’s Span ID (ProjectType)!

      Reply
  • June 3, 2016 at 5:13 PM

    I 100% cannot get this to work. Any helpers?

    Reply
  • August 14, 2015 at 6:08 PM

    Worked like a charm. Thanks!

    Reply
  • August 4, 2015 at 9:36 PM

    Cool! Is there a way to align the choices if the choice names are not of the same width. In my case, I have around 40 choices and the choice names are not the same size. When the choices wrap into the second, third lines… the choices don’t look nice.

    [ ] choice 1 [ ] choice two [ ] another long choice that wraps down [ ] choice four [ ] choice 5 [ ] choice six [ ] choice 7 [ ] choice eight

    Reply
  • May 29, 2015 at 6:20 AM

    How did you get Bar above Objective “Details of Change”. please help me i am trying to design a form with section title.

    Reply
    • May 30, 2015 at 7:19 AM

      In your Custom NewForm.aspx, Search for :

      and insert the below code to it:

      Now, You can use this style anywhere. E.g.

      Details of Change

      Reply
  • May 11, 2015 at 6:00 PM

    I can’t seem to find in the new form I’m working on. The only thing I can find is this:

    Although it’s highlighted in yellow. Any thoughts?

    Reply
    • June 1, 2015 at 1:39 PM

      Yes a New Custom Form was created. Is there another custom form that I’m not aware of? I should elaborate a little better because my previous post I forgot to mention that I’m not able to find the AdditonalPageHead tag as you described it previously in your article.

      Reply

Leave a Reply