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:

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.

SharePoint 2013 list column title modification with javascript

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPreRender: function(ctx) {

        var field = getFieldByDisplayName(ctx,"Task Name"); 
        if(field)
            field.DisplayName = "Task Name:::"; 
     }
   }); 

});


function getFieldByDisplayName(ctx,name)
{
    var result  = ctx.ListSchema.Field.filter(function(f){return f.DisplayName == name;} ); //find field by display name
    return result.length > 0 ? result[0] : null;
}