Applying CSS Styling to Read Only Project Custom Field

Had a requirement to apply CSS on a Project Custom Field, which is set to read-only through workflow stage. Challenge here was how to get div of that field where we only ‘guid’ attribute.

Following the HTML of a read-only custom field.

<div guid="cc056a66-c75c-e711-80cc-0050568d9644">

<p>​director comments</p>


After applying jquery, it picks the field as shown below and applies css.

<script src="/PWA/SiteAssets/jquery-1.10.2.min.js"><script>


var myDiv = $('div[guid="cc056a66-c75c-e711-80cc-0050568d9644"]');
myDiv.attr("style", "border: 1px solid #ABABAB; padding-left:5px");



After applying css, custom field HTML looks something like this;

<div style="border: 1px solid rgb(171, 171, 171); padding-left: 5px;" guid="cc056a66-c75c-e711-80cc-0050568d9644">

<p>​director comments</p>



Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s