Home > Paul Mather, Work > Increase the width of a #ProjectServer text field on a PDP #PS2013 #ProjectOnline #JavaScript #jQuery #SharePoint

Increase the width of a #ProjectServer text field on a PDP #PS2013 #ProjectOnline #JavaScript #jQuery #SharePoint

Paul Mather
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:

image

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:

image

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:

image

Advertisements
Categories: Paul Mather, Work Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: