kwizcom banner advertisement

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: Arrange Choice Field Radio Buttons Horizontally
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:
SharePoint Choice Field Options Horizontal Alignment
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 Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms Reviewed by Salaudeen Rajack on 2:14 PM Rating: 5

21 comments:

  1. waw!! it workss

    ReplyDelete
  2. 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?

    ReplyDelete
    Replies
    1. Instead of Default NewForm.aspx, Try creating your own Custom Form!

      Delete
    2. 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.

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

    ReplyDelete
    Replies
    1. In your Custom NewForm.aspx, Search for : <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

      and 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>

      Delete
  4. 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

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

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

    ReplyDelete
    Replies
    1. 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)!

      Delete
  7. 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 :(

    ReplyDelete
    Replies
    1. Simple! Wrap your choice fields inside different SPAN IDs and Use the code under "What If you have Multiple Choice Fields?" section!

      Delete
  8. 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

    ReplyDelete
    Replies
    1. Well, jQuery can do this! Start here:
      http://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

      Delete
  9. 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.

    ReplyDelete
  10. 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.

    ReplyDelete
  11. 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!

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

    ReplyDelete
  13. 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

    ReplyDelete

Please Login and comment to get your questions answered!

Powered by Blogger.