Hi again, John here with a post that I hope will help out a lot of people.
The scenario is simple: You have just used SharePoint Designer to insert a Data View of some list. You have formatted the fields to be SharePoint:FormField controls, and now you want to change the size of those controls.
Why is this so hard? Well, the controls are rendered from the server (as are all asp.net controls) and so the markup (or HTML) used to make them display in the browser cannot be directly manipulated on the SPD design surface. What we need to do is determine the class SharePoint uses to render the size of the controls, and then override it via CSS.
For this demo, we'll use the default Title field from the default Announcements list. These steps also assume that you know how to create new pages and insert views on them.
At this point you can see that the class on this field is called ms-long. This is the class we need to override. So for other controls, we just want to follow the same steps above. By getting the server generated HTML from the browser in step 10, we are able to use all of SPD's tools to understand the HTML. I do this a lot when dealing with the customization of server controls.
Now we just need to add a <style> block inside our first page that says something like below, then save the page.:
This will make the textboxes on this page 100 pixels wide.
If you want to know more about CSS in general, check out the information on the Microsoft SPD Site. If you want to know more about Core.CSS in SharePoint, check out this Style Guide.
Good luck!-John JansenTest Lead, SharePoint Designer
I really need to edit the width of the RTF or multi-line text box, etc. so far no one has answered this question. Please help me make this easier on my users.
I have the same problem as KAN, :
I followed your post to modify the width of a text box (ms-long), a people picker(ms-inputuserfield) and a multi-line rich text box (ms-long). The text box transformed as expected, but the people picker and a multi-line rich text box does not seem to change at all. Any advice?
Can anybody tell me the solution to this ??
For the Rich Text Fields, the class is either ms-rtelong or ms-rtelonger (or both). I'm not sure what determines which class applies...
Hi, I also changed the ms-rtelong and ms-long to eg 800, but when I enter a lot of text in it, it is ok when you look at it via the new or edit item, but when you just view the item, the text is shortened (wrapped) after some words, so the width is not kept in the dispform css ???
I added width:800px to ms-formbody now and apparently this works fine
Thanks for those class names.
How the heck did you find the names? I searched the HTML and there is nothing called ms-rtelong but it definitley is the correct CSS class. It updated the fields as soon as I changed it.
This had been driving me nuts for so long. The editor box was always shorter than the toolbar in my custom CSS...sigh...
To change the width of the people picker, I used .ms-usereditor.
Excellent information - huge help !!
I'm trying to increase the width of the lefthand box inside an Add / Remove Formfield
[ ] add> [ ]
[ ] <remove [ ]
(want this side to be wider)
Anyone know how to do that in SP designer?