List - Control the column width

SOLVED

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!!

  • +1
    verified 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. Slight smile

    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

  • 0 in reply to bmalik_1

    Thank you Basil!  I will give it a go and let you know how it works out.

  • 0 in reply to Michele Gaw

    Basil...I forgot to post back how this worked out for me.  It worked!  Thank you very much!!