Narrowing list form to one column

Updated 10.10.2009: To use this script with the script Headings in SharePoint Forms – jQuery you must set the parameter “stretch” for the heading script to false. You must also call the heading script before the “Narrowing list form to one column-script”.

I have made a tiny update to the heading script to support setting the backgound color when using it with “Narrowing list form to one column-script”.


I got a request for a solution to narrow down the list form to one column with the “formlabel” above the “formbody”.
This is actually a very simple task.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG
The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

Add a CEWP below your NewForm list-form (and EditForm if you like) like this:
IMG

Add this code to the CEWP:
[javascript]
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready (function() {
// This image sets the width of the form to min 590px – it must be removed
$(‘#onetIDListForm img[width=590]’).remove();
});

$("td.ms-formlabel").each(function(){
// Get the html of the formlabel
var label = $(this).html();
// Insert the label over the formbody
$(this).parents(‘tr:first’).find(‘.ms-formbody’).prepend(label);
// Remove the original label
$(this).remove();

});
</script>
[/javascript]

Note: If you use this solution with other solutions that modifies the formbody – like the Wrap choice-field in multiple columns, you have to call this script last to have the “formlabel” added in the right position.

Your end result should look like this:
IMG

As always – ask if you do not understand how to use this script

Alexander

22 thoughts on “Narrowing list form to one column”

  1. you continue to put out some great stuff. Here is a question. I want to add a tool tip for some or all field titles. I want something somewhat dynamic, different for each field title. I have found many tool tip scripts, but none I could apply to the field titles. If you can move or hide them there should be a way to apply the tip, correct?

  2. I am using this script with the show header script you created. I realized after that you remove or hide the label column. IS there a way to use bother scripts, get the header text to display on the header fields and hide the others?

  3. You must set the parameter “stretch” for the heading script to false to use it with this script. Read the comment in the top of this post about updating the heading script.

    Alexander

  4. There are – in the heading script, but when narrowing to one column the label column is removed. To set the width when narrowing to one column you can modify the width of the image which is removed to “slim down” the width. Do it like this (line 5 in the above codeblock):

    $('#onetIDListForm img[width=590]').attr('width','500');
    
  5. this was a great post. I have been trying to do this and you have answered my question. I have been reading through your blog and what you have done is absolutely outstanding.

    Great Work!

  6. this may be the place to post this question. I know we can edit the forms, which give us the abiltity to rearrange the placement of the form fields. This requires us to actually edit the page. also we lose the attach file function.

    You have done some great work manipulating the page elements. What I am wondering is: is there a way to lay related fields to appear in a single row on the form? Say there is a name, program and a date field. currently they appear horizontally. can the layout be manipultate easily to lay them out vertically?

  7. Hi Larry,
    Sorry for the late reply, but I have been in bed for the last week with my new friend (H1N1 Influenza).

    This can be done by inserting a table where you want the fields to appear and move the selected fields into a separate “td” in this table. It would widen the form quite a bit though.

    I will make a note of your request and try to make time to write about it.

    Alexander

    1. Hi,
      I’m not sure what you mean, but did you put the script in a CEWP below the form? You did not copy the code with the line numbers did you?

      – you have to hover the mouse over the code and click in the top right corner to get the code in the right format.

      Alexander

Leave a Reply