Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms
Requirement is to arrange choice fields of Radio buttons to horizontally in a SharePoint 2013 custom list form: 
How to arrange choice field options Horizontally?
Step 1: Create 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.
Step 2: In the custom list form, find the tag <AdditionalPageHead> and add this code just below it.
When you have multiple choice fields in the form, its better to create a function to arrange them horizontally.
SPServices Framework also offers this functionality:
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPArrangeChoices

How to arrange choice field options Horizontally?
Step 1: Create 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, its 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:
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPArrangeChoices
Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms
Reviewed by Salaudeen Rajack
on
November 24, 2014
Rating:

waw!! it workss
ReplyDeleteI can't seem to find in the new form I'm working on. The only thing I can find is this:
ReplyDeleteAlthough it's highlighted in yellow. Any thoughts?
Instead of Default NewForm.aspx, Try creating your own Custom Form!
DeleteYes 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.
DeleteHow did you get Bar above Objective "Details of Change". please help me i am trying to design a form with section title.
ReplyDeleteIn your Custom NewForm.aspx, Search for : <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
Deleteand insert the below code to it:
<style type="text/css">
.GroupHeader
{
background-color:gray;
width:500px;
color:white;
font-weight:bold;
height:25px;
text-align:center;
border:1px;
}
</style>
Now, You can use this style anywhere. E.g.
<tr class="GroupHeader"><td colspan="2">Details of Change</td> </tr>
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.
ReplyDelete[ ] choice 1 [ ] choice two [ ] another long choice that wraps down [ ] choice four [ ] choice 5 [ ] choice six [ ] choice 7 [ ] choice eight
Worked like a charm. Thanks!
ReplyDeleteI 100% cannot get this to work. Any helpers?
ReplyDeleteIs there any way I can add more spacing between the radio buttons?
ReplyDeleteSure, Add this CSS to the page:
Delete#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)!
nice it works
ReplyDeleteHow it works if i have more one question of multiple choice radiobutton???
ReplyDeleteshould 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!
DeleteHi 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?
ReplyDeleteRegards,
Pradeep
Well, jQuery can do this! Start here:
Deletehttp://www.sharepointdiary.com/2013/04/show-or-hide-list-form-field-based-on-another-field-value.html
http://www.sharepointdiary.com/2013/06/get-query-string-and-set-list-form-field-value.html
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.
ReplyDeleteThis 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.
ReplyDeleteIt 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.
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.
ReplyDeleteThanks!
wooooow, i was looking for something like this, it really helped
ReplyDeletewoow, it really helped:)
ReplyDeletei have a question here, can i control the diection? like the 1st option to be rightside without re-edit the column itself
Wow, It worked for one Radio button.
ReplyDeleteHowever 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..
Can you please provide a sample of the script/code for using in a list with multiple choice(radio buttons) in a list.
ReplyDeleteI change the span id to optreq1, optreq2 ? and it does not work
its not simple :( please help
Use the same SPAN ID in the function filed-
ReplyDeletespan 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.
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!
ReplyDelete