I am editing the look and feel of my Sharepoint NewItem.aspx Form using HTML, CSS and JavaScript. But im having a problem on how to resize my people picker Sharepoint:Formfield. I used css and even added a cssclass to the Sharepoint Field tag. Look at the code below.

<SharePoint:FormField runat="server" id="ff11{$Pos}" cssclass="ms-formfieldlabel" ControlMode="New" FieldName="Author0" __designer:bind="{ddwrt:DataBind('i',concat('ff11',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Author0')}"/>

CSS code:

width: 150px;
height: 5px;

But still my peoplepicker field is so long that it is not fit my form UI requirement. Kindly look at the image below. Please help.


After applying what you have suggested, the people picker input fiels shortened but still there is a column that makes it long. See image below.

CSS applied.


Check adding !important

.ms-formfieldlabel { width: 150px !important; height: 5px !important;

| improve this answer | |
  • No luck @biju.. :( I tried adding !important but still my field is so long. – Ching29 Oct 29 '13 at 3:44
  • Use developer tools found in IE, Firefox or Chrome to inspect the CSS classes used in the control. Try modifying the width dynamically and you will be able to spot that class which apply width to the control as a whole. Overriding the CSS value is the way to width. We did this in many controls like Taxonomy picker, people picker etc. – Biju Joseph - MCSD Oct 29 '13 at 5:33
  • Thanks for this @Biju. This gave me hope. After doing this, i altered the class and add width to check and it worked. But my problem is, the length of the column is still long. I dont knwo how to alter this since there is no cssclass anymore. Kindly check above. Thanks you so much. – Ching29 Oct 29 '13 at 6:10

Have you verified whether it is actually implementing the CSS class you created? Using dev tools like Chrome->Inspect element you should be able to see if it's getting overridden by other CSS elements and what those are.

| improve this answer | |
  • Thanks. This has been a steeping stone for me. But another problem occured, kindly check above. I added an image. Thank you. – Ching29 Oct 29 '13 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.