Kashif Nizam Qureshi

Applying CSS Styling to Read Only Project Custom Field

Leave a comment

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>

</div>

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

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

$(document).ready(function(){

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

});

</script> 

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>

</div>

Advertisements

Leave a Reply

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

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