Formatting in Related Items

[YumaIT]

Hi, I have two questions related to formatting in Related Items:

1. How can I size a field? In the picture below I have a field I would like to make wider, either fixed width or a certain percentage of the row width.

ColumnWidthCapture.PNG (161.78 KiB) Viewed 2028 times

2. Is there a way to create an alias or display name for the column headings. Since many tables have the field "ID", my example above would be to change the "ID" column heading in the related items to "Ticket ID". We also may like to include things like spaces in our column headings.

[AlexZver]

Hi!

Sorry for a late reply!

1) Please add this CSS rule to your CSS Editor:

Code: Select all

.ms-viewheadertr th:nth-child(5) {
   width: 350px;
}

Notice that you should replace '5' with a zero-based index of your column you expect to be resized.

2) To rename a column, you can simply rename it in the source List of the Related Items control. If you go to List Settings of the original list, you can rename any column. Be careful as the internal name of the column still stays the same.

But if you don't want to change the source list, there is another approach:

- add a CSS class to your Related Items, i.e. "related-issues'
- add this code snippet to your JavaScript Editor:

Code: Select all

var elem = $(".related-issues").find("div [name=Col]").find("a");
elem.html("Your     Title     With     Spaces".replace(/ /g, " "));
elem.attr("Title","Your Hint");

Notice that you should replace "Col" with an existing column name you would like to replace.