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: 
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: Find the tag <AdditionalPageHead> in the custom list form 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:
SPServices Framework also offers this functionality: https://sympmarc.github.io/SPServices/value-added/SPArrangeChoices.html
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!
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.
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
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..
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
wooooow, i was looking for something like this, it really helped
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!
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.
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.
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
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
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 🙁
Simple! Wrap your choice fields inside different SPAN IDs and Use the code under “What If you have Multiple Choice Fields?” section!
nice it works
Is there any way I can add more spacing between the radio buttons?
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)!
I 100% cannot get this to work. Any helpers?
Worked like a charm. Thanks!
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
How did you get Bar above Objective “Details of Change”. please help me i am trying to design a form with section title.
In your Custom NewForm.aspx, Search for :
and insert the below code to it:
Now, You can use this style anywhere. E.g.
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?
Instead of Default NewForm.aspx, Try creating your own Custom Form!
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.
waw!! it workss