This project has moved and is read-only. For the latest updates, please go here.

SharePoint Form Radio Buttons: Switch from Vertical to Horizontal

Apr 4, 2013 at 9:07 PM
Okay, I am trying to get my SharePoint 2007 custom list form field radio buttons and check boxes form fields which by default are vertical, to be horizontal in SP 2007. I am unsure as to what I should or should not be doing next.

Here is one form field called ProjectCompleted on the default form
<xsl:comment>FieldName=&quot;Project Completed?&quot;</xsl:comment><SharePoint:FormField runat="server" id="ff14{$Pos}" ControlMode="Edit" FieldName="Project_x0020_Completed_x003F_" __designer:bind="{ddwrt:DataBind('u',concat('ff14',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Project_x0020_Completed_x003F_')}" />
SPServices form:
// Rearrange radio buttons or checkboxes in a form from vertical to horizontal display to save page real estate
    $.fn.SPServices.SPArrangeChoices = function (options) {

        var opt = $.extend({}, {
            listName: "All Projects",                   // The list name for the current form
            columnName: "Project Completed?",                   // The display name of the column in the form
            perRow: 2,                      // Maximum number of choices desired per row.
            randomize: false                // If true, randomize the order of the options
        }, options);

        var columnFillInChoice = false;
        var columnOptions = [];
        var out;
Apr 4, 2013 at 9:14 PM
Ok, you're not going about this correctly.

First of all, you don't need to edit the form at all. To use SPServices, you can just add a Content Editor Web Part into the page that contains the script. The script then runs at page load, changing the choice orientation.

Have you looked at the documentation for the function?

Apr 4, 2013 at 9:35 PM
The problem is that this form is not accessible by through SP to drop a CEWP into it. If I attempt to from the page itself, it does not allow me to anywhere on the page.

Apr 4, 2013 at 9:59 PM
Apr 4, 2013 at 10:05 PM
I am using IE 9 browser. Not sure, but I am not getting anything returned that looks different anywhere.
Apr 4, 2013 at 10:13 PM
It's a query string parameter, so you need to add it at the end of the URL:

Nov 1, 2013 at 10:29 PM
Edited Nov 1, 2013 at 10:30 PM
This is not working for me also. I have created a custom new form (MOSS 2007) using SPD 2007. What I am doing wrong? See code example below:

I am referencing the jquery-1.4.min file and then the SPService-0.5.0.min which is below the Place holder main content.

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="../../Shared Documents/jquery-1.4.min.js"></script>
<script type="text/javascript" src="../../Shared Documents/jquery.SPServices-0.5.0.min.js"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPArrangeChoices({ columnName: "Frequency", perRow: 1 }); }); </script> Next, some lines below I added the xsl comment for the Display name/Field
                    <td width="400px" valign="top" class="ms-formbody">


                        <SharePoint:FormField runat="server" id="ff18{$Pos}" controlmode="New" fieldname="Frequency" __designer:bind="{ddwrt:DataBind('i',concat('ff18',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Frequency')}" />
                        SharePoint:FieldDescription runat="server" id="ff18description{$Pos}" FieldName="Frequency" ControlMode="New"/>

Nov 1, 2013 at 11:45 PM
Definitely get fresh copies of the two libraries and see if that fixes it. You're way behind.

Nov 4, 2013 at 9:41 PM
Thanks Marc for the quick response. I updated the libraries, however it is still not working. What am I missing in the code?

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="../../Shared Documents/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../Shared Documents/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPArrangeChoices({ columnName: "Frequency", perRow: 1 }); }); </script>
Nov 5, 2013 at 2:46 PM
You seem to be doing things correctly (though you're still running older versions of the libraries). Try Ctrl-Click on the src values in SharePoint Designer to see if the links are good.