CRM 2013-Increase width of Process Step Label in Business Process

Business Process is the new feature in CRM 2013 and user can add multiple steps on the form. However we don’t have ability to change the layout of the process bar and the step name will be wrapped automatically.

To show the step name on the form completely, we decide to increase the width of the step name label by loading the customized CSS file. Following is the screenshot of layout change, JavaScript and the CSS file.


Business Process Formatting

Business Process Formatting

Sample Java Script used:


// Script Type: Changing Process step Label width


function LoadCSS() {

var head = document.getElementsByTagName(‘head’)[0];

var link = document.createElement(‘link’);

var path = Xrm.Page.context.getClientUrl() + “/WebResources/_cssfile”;

link.rel = ‘stylesheet’;

link.type = ‘text/css’;

link.href = path; = ‘all’;



// End of the script


/*Increase width of process step*/

.processControlContainer div.processStepLabel {

width: 230px!important;


.processControlContainer div.processStepLabel span {

max-width: 220px!important;


//end of CSS Script


I hope you find it useful!

Author: Zhe Chen
Title: Lead Dynamics CRM Consultant @ Adisys

7 thoughts on “CRM 2013-Increase width of Process Step Label in Business Process

  1. This code worked great, except for one little thing. If you only have three steps in a process the field to enter data shows up below the label instead of to the left of it. It is an aesthetic issue not a workflow or data issue. I will tweak the code a bit to see if I can adjust it.

  2. Hi Zhe,

    Thank you for posting this article. I am new to Dynamics CRM 2013 and trying to make this script run on my CRM site. Would you be kind enough to show how can I add the JavaScript and CSS to my Opportunity Form?


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