Sharepoint typically with its list styles default have a set width placed on them, now thats all fine and good but clients will also want to increase and customise their form lists to have somthing a little better, especially when the select lists are quite long.
See here for example: 
As you can see the select lists arent wide enough to support the entries. Utilising the trust Sharepoint Designer, open your Site and do the following:
1. On the File menu, point to New, and then click CSS.
2. Add the following code to the new CSS file:
.select-container div { width:300px; height:150px; }
3. On the File menu, click Save and then use the Save dialog box to save the file as shared_styles.css in the root directory of your site. Now the tricky part comes in, what we know have to do is create a generic function which sweeps the rendered page for any<select> tags and clears the attributes for height and width for them, for this case we’ll name this javascript function removeLocalStyleAttributes(). So on Sharepoint Designer goto:
1. On the File menu, click New, click JavaScript, and then click OK.
2. Add the following code to the new JavaScript file:
function removeLocalStyleAttributes() {
var coll = document.body.getElementsByTagName(”div”);
for(x=0;x < coll.length; x++) {
if(coll[x].className == “select-container”) {
var collDivControls = coll[x].getElementsByTagName(”DIV”);
for(y=0;y < collDivControls.length; y++) {
collDivControls[y].style.width = null;
collDivControls[y].style.height = null;
}
}
}
}
What this function is doing is grabbing all instances of the <div> tag and getting a collection.
Once we know the size of the collection, we’ll loop through the <div>’s looking for a className called “Select-container”, if found then get the control width and height and specify them to be null.
On the File menu, click save and then save the file as share_functions.js in the root directoy of your site.
Now we could do this site wide for you page and apply the code to the .master of the site as follows:
Look for the <asp:content contentplaceholderid=”PlaceHolderAdditionalPageHead” runat=”server”></asp:content> In there paste the following code that links to the previous 2 created files:
<asp:Content contentplaceholderid=”PlaceHolderAdditionalPageHead” runat=”server”>
<link rel=”stylesheet” type=”text/css” href=”../../shared_styles.css” mce_href=”../../shared_styles.css”>
<script src=”../../shared_functions.js” mce_src=”../../shared_functions.js” type=”text/javascript”></script>
<script type=”text/javascript”> _spBodyOnLoadFunctionNames.push(”removeLocalStyleAttributes”); </script>
</asp:Content>
Lastly in the DataformWebPart where your select box was orginally, wrap this with an outer div as follows
<div class=”select-container”>
<SharePoint:FormField runat=”server” id=”ff5{$Pos}” ControlMode=”New” FieldName=”Projects” __designer:bind=”{ddwrt:DataBind(’i',concat(’ff5′,$Pos), ‘Value’,'ValueChanged’,'ID’,ddwrt:EscapeDelims(string(@ID)),’@Projects’)}” /> </div>
Save the file.
What the content place holder is now doing is importing the new css and javascript functions, then pushing or executing the javascript function that removes the height so that the css style will be inherited to it.
So the rendered page will remove the attributes, then any select that has contained with it the class “select-container” then it will apply the .select-container div { width:300px; height:150px; } And thats it, a generic css and javascript webpart to sweep the rendered page, set the values to null and let good old CSS apply its styles to the form object.
Cheers Steve
