Different Field Widths within same Column Dynamics CRM 2011

Paul Nieuwelaar, 04 September 2012

You can see in the image above what we want to achieve. Basically, within the same section, we want to have one field occupy more space than the others. In this example, we have a Product name, which could potentially be very long, and then price and quantity fields, which are never going to need much space. For this reason, it makes sense that we give the Product column more than the default 1 quarter of the screen.

There are 2 ways to achieve the result shown in the first image.

First, using customizations. This method is preferred if possible, as it uses a supported approach.

Let’s jump straight into our form customization screen, and have a look what’s happening.

As you can see, we have added a 2 column tab (each occupying 50% - but you can change this). Inside the first section, we have 1 column. Inside the second section, we have our remaining 3 columns. In this particular scenario, the sections have been configured to display labels at the top (as working with 4 columns can be difficult otherwise), and the labels on the second and third row of fields have been hidden (as the fields are the same).

You can customize the widths of the sections, and the number of columns used in each section. The limitation here is that you can only have 2 different column sizes - you don’t have full control over the exact width of every column.

When we preview our form we get the following result:

If you need full control over the width of every column, you can try the second option, using JavaScript to modify the column widths. As mentioned earlier, this method is not supported, and should be avoided if possible.

This time add all fields into the same section:

Next, call the following function from your forms OnLoad event:

function changeCols(fieldName, colWidths) {
    var field = document.getElementById(fieldName + "_d");
    var cols = field.parentNode.parentNode.parentNode.childNodes[0].all;

    for (var i = 0; i < colWidths.length; i++) {
        //columns have an empty column between them, this skips those
        cols[i * 2].width = colWidths[i];
    }
}

When calling this function, first pass in the name of any field within your section (this is used to find the columns). Next you need to pass in an array containing the width for each column (from left to right) - make sure the number of widths you pass in matches the number of columns in your section.

When defining the column width, you can use a fixed width by passing in “80” for example, which will make that column 80px wide no matter how big your screen is. Otherwise you can use “80%”, which will mean the column occupies 80% of the screen, and will change dynamically.

If you’re using just percentages, make sure all columns add up to 100%. If you have a mixture of percentages and fixed widths, make sure the percentages add up to 100%; they will share the remaining space after the fixed width columns.

We can see an example of calling the function:

When we preview our form we get the following result:

As you can see the results are very similar, so the method you use is up to you, however as I mentioned, it is recommended to stay away from the JavaScript method if you can, as this code will break when CRM goes cross-browser.