1

In my Office 365 (SharePoint Online) I have a very simple Custom List which consists of a few columns/fields, and I have a requirement to move/align some fields a little bit to the right side. Something like the screenshot example below:

enter image description here

I am not allowed to use InfoPath nor any third-party solution. So, My only options are: SharePoint Designer & JavaScript.

Is there any way in SharePoint Designer or JavaScript to move or add some spaces/padding to some fields so they would appear as the screenshot below?

I tried:

$('nobr:contains("FieldName")').before("  ");

But this add spaces only before the label and not moving the whole field's row.

Could you please guide me how to accomplish this?

I would sincerely appreciate any help in this, Please !

Improve this question

3 Answers 3

Reset to default
4

It's still "super" simple, as you know, CSS is... CSS.

So first thing first, go into the request form through sharepoint, click on the cog and hit edit page, press F12 to access developer tools and figure out which element is it that you need to modify, in my case it was: .ms-formbody{ padding:6px 18px(Or the desired padding)!important} Then on the edit page, add webpart, media and content, script editor and add:

<style type="text/css">
   .ms-formbody{
       padding:6px 18px(Or the desired padding)!important}
</style>

Between the Style and / you add the code you found out from the Developers tool and voila, no Designer needed.

Edit: For some odd reason, I read something totally different. I will leave the initial reply below this edit line.

it's super simple.

Go into List Settings > Section Columns click on Column Ordering. Voila.

If you are using Content Types, simply go into the Content Type options and you will get the Column Ordering within the CT.

Regards

Improve this answer
2
  • Please, Re-read my question and look at the screenshot that I provided. I am NOT looking for column ordering. I am looking for how to shift/move some fields by adding some padding spaces. Commented Dec 23, 2016 at 17:11
  • Changed reply, not sure if you got it... Commented Dec 29, 2016 at 16:55
3

If your question relates to adding padding on the right hand side of a NewForm.aspx for all fields, then my answer my work. Are you able to 1) open the list’s NewForm.aspx in Designer and set the Web Part Zone to Horizontal Layout? You would then 2) open the list in the browser and on the List tab, select “Form Web Parts” and “Default New Form.” Next 3) add a Content Editor Web Part (CEWP) on the right side and display the list form on the left. You could set the width of the CEWP to something small – 100 pixels or so – to give you a bit of padding on the right.

I can’t speak to Online, but in SharePoint 2010 to change a Web Part Zone’s layout you open the list’s form in Designer, go to Advanced Mode, and select the zone’s layout to horizontal. To do it manually, I believe you need to look for a tag that starts with “WebPartpages: WebPartZone” and from there add Orientation="Horizontal” before the closing tag.

Improve this answer
1

I've had some luck making customizations to SP list forms via SharePoint Designer, using the following high-level approach:

  1. Open the list in SP Designer.
  2. Create a new newForm page.
  3. Edit the form layout as needed.

Once you create your own New Item form in SP Designer, the editor will let you edit the xsl templates used in the form. For most list types, the xsl just wraps basic table elements, with each list column being given a single row with one cell for the column name and the other for the actual column value control. For example:

enter image description here

In my example I've left the form's column layout alone and just changed the names of some of my fields to make the more user-friendly. But you could move any field labels into the second column to suit your needs.

Then, once you've got the form working & looking the way you want, you can set it to be the default form for your list.

--Eric

Improve this answer
1
  • I don't recommend using designer when it can be fixed by adding a snippet webpart with CSS code. Commented Dec 29, 2016 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.