SharePoint (and Project Server) Shenanigans

I am a Project Server and SharePoint consultant but my main focus currently is around Project Server. I have been working with Project Server for nearly five years since 2007 for a Microsoft Gold Certified Partner in the UK, I have also been awared with the Microsoft Community Contributor Award 2011. I am also a certified Prince2 Practitioner. This article has been cross posted from pwmather.wordpress.com (original article)

While working on a client site today the client wanted to increase the input box for a single line of text field on the PDP to help when typing data / viewing what you have already typed. As the box is quite small the text at the start of the box disappears as you type. See below:

Text entered:

“This is a new comment in a single line of text field. As I type the text disappears from view making it difficult to review”

One option is to increase the width of the input box. You can do this with JavaScript / jQuery. The jQuery to do this is below. As you can see you will need the input box id.

1 <script type="text/javascript" src="/PWA/SiteAssets/jquery-1.8.3.min.js"></script>
2 <script> 
3  $(document).ready(function(){
4 $("#idCF_41396333-22dd-e311-9430-00155d15d1fe").width(750);
5 });
6 </script>

To get the ID, use the browser dev tools and select the correct element:

In the highlighted html you will see a property called ID, shown below in bold:

<input name="ctl00$ctl40$g_e2fda013_167b_4aa4_96c8_3c3437803054$ctl00$pfp_Repeater$ctl24$idCF_41396333-22dd-e311-9430-00155d15d1fe" title="Test Single Lint of Text" id="idCF_41396333-22dd-e311-9430-00155d15d1fe" type="text" size="50" maxlength="255" GUID="41396333-22dd-e311-9430-00155d15d1fe"/>

Copy the ID value and update the script below with the correct ID:

<script type="text/javascript" src="/PWA/SiteAssets/jquery-1.8.3.min.js"></script>

<script>

$(document).ready(function(){

$("#idCF_41396333-22dd-e311-9430-00155d15d1fe").width(750);

});

</script>

Add to the script to the correct PDP either using a script editor web part directly or save the js file, upload to PWA and reference the file using a content editor web part. The script will also need access to the jQuery library. Once complete you will see the wider input box: