Change the width of SharePoint:FormField elements

Ever want to change the width or height of a particular field or text box on a SharePoint form using SharePoint Designer?  If you have looked around you will realize it’s not the most obvious of solutions.

If you would like to change the size of all the elements on a page you can simply add a content editor with the following:

<style>
.ms-long{ width:100px; }
</style>

However if you want to get granular its a bit more involved.  You need to place the SharePoint:FormField element inside of a DIV and assign it an ID as shown below:

<div ID=”container1“>

<SharePoint:FormField runat=”server” id=”ff24{$Pos} ControlMode=”New” FieldName=”Phone” __designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff24′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Phone’)}”/>

</div>

Once you have all of your fields inside of uniquely ID’ed DIV’s we can use CSS to select only the .ms-long classes within those elements.  Example:

<style>

#container1 .ms-long{ width:25px; }

#container2 .ms-long{ width:25px; }

#container3 .ms-long{ width:35px; }

</style>

Easy enough, and covered in part other places but hopefully this will save some time if anyone runs into my problem again.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s