Make column right alignment in List view possible ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-25-2017 10:50 PM
Hi folks,
The issue is the Amount field needs right alignment in ListView. I know there may not be an easy option other than raising an enhancement request based on Re: List View Column need to be aligned center not left/right
Re: List View Column need to be aligned center not left/right
However, I was wondering if anyone every tried the same approach as I am now as below,
1) Create field style on the table column which doesn't work as expected
2) Not the best approach, but it may work by creating onLoad Client Script
function onLoad() {
var LIHeaders = document.getElementsByClassName('text-align-left list_header_cell list_hdrembedded');
if (LIHeaders.length>0) { // LIHeaders.length returns 5 which is the 5 columns and LIHeaders[4] is the Amount field
for (var j = 0 ; j < LIHeaders.length; j++) {
if (LIHeaders[j].innerHTML.toLowerCase().indexOf('amount') != -1) { //if the element HTML contains amount
//LIHeaders[j].innerHTML= "TEST"; // replaced with TEST and it worked (this is the right element to work on)
LIHeaders[j].style.textAlign="right"; // tried without luck.
//console.log("test: LIHeaders[j].innerHTML=" + LIHeaders[j].style); //output to browser console for debugging
//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("Amount","<p style='text-indent: 0.5em;'>Amount</p>"); // tried without luck.- inserting new space
//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("column_head list_hdrcell table-col-header",""); // removing the class, no luck
//LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace("cursor:pointer; margin-right:4px","cursor:pointer; margin-right:0px"); // changing the margin-right to 0px, no luck (by the way, it is the hanger bar 3 bar icons, not Amount)
LIHeaders[j].innerHTML = LIHeaders[j].innerHTML.replace('align="left"','align="right"'); // this doesn't work either
console.log("test: " + LIHeaders[j].innerHTML);
}
}
}
Here is the element source code on Amount field
Other than waiting for Enhancement from ServiceNow HI, is any way I could DIY myself?
Any advice would be appreciated.
Kind regards,
- Labels:
-
Scripting and Coding

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-25-2017 11:17 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-26-2018 12:15 PM
Hello Harsh, Would you please let us know what you had given in the value part( 1==1) ?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-26-2018 12:20 PM
The Value field may contain JavaScript that is evaluated to determine if this style should be used for the field within a list.
Set Value to javascript:<script> - the field value is available to the script as the variable value.
If the evaluated script returns true, the style is used for the list item.
I just make it simple and used javascript: 1==1, after that it's returned true and now this field style has been applied on list.