List - Control the column width

Question

Is it possible to adjust the display width of a list page? I have the following list page and I would prefer that the Reference number did not "wrap" to the next line. Is there a way to force this column to always default to a fixed width? 
 I want the column to display O-20200037-1 
 rather than 
 O- 
 20200037- 
 1 
 Any assistance would be greatly appreciated. Thank you!!

bmalik_1 · Accepted Answer

Hi Michelle! I had fun playing with this one from simply a "can this be accomplished through the client side API or standard JavaScript" perspective. While I have no doubt Mr. Richards or other seasoned professionals with more experience with this than I can provide a way to accomplish this through the standard UI, I didn't go that route with this solution. I used the "Orders" entity. Administration >> Orders >> Lists >> Orders Grid and used the Client Side API and client side JavaScript in the "Custom Script" section. 
 Here's the code with all my commentary: 
 // Copy and Paste this on any list you want to adjust a column to a fixed width - wrap in script tags.
crm.ready( function() {
var myTargetField = "orde_reference"; // Define the column's name
var desiredWidth = "400px"; // Define the width the column should be. Pixels seem to work best.

var cTar = crm.grids().rows().column(myTargetField);
var cTarIdx = crm.grids().rows().columnIndex(myTargetField);
cTar.setCellAttribute(0,cTarIdx,"id","cTar"); // give our column an ID we can use to create an object

if(cTar)
{
console.log("snap! our column is here"); // strictly for debugging
var newFirstCol = document.getElementById("cTar");
newFirstCol.style.width = desiredWidth;
}
else
{
console.log("womp womp"); // you really shouldn't see this unless something very wrong occurred
}
} ); 
 The commentary makes it a bit difficult to read w/o coloration of the text. Here's the raw code w/o the commentary (don't forget script tags): 
 crm.ready( function() {
var myTargetField = "orde_reference";
var desiredWidth = "400px";

var cTar = crm.grids().rows().column(myTargetField); var cTarIdx = crm.grids().rows().columnIndex(myTargetField); cTar.setCellAttribute(0,cTarIdx,"id","cTar");
if(cTar) {console.log("snap! our column is here");var newFirstCol = document.getElementById("cTar");newFirstCol.style.width = desiredWidth;}else{console.log("womp womp");}
} ); 
 I hope that helps! Best Regards, Basil Malik

Sage CRM

List - Control the column width

Top Replies

COMMUNITY

COMPANY

PARTNERS

SUPPORT & TRAINING