0

I have a document library with scripts to change the font size of the header row. All the columns apart from one; "Short Description"; have changed.

I have just added a script to adjust the column width of this column and it's not responding to that either.

I have tested the script on other columns in the table and it works fine.

Its a Multiple Line Text column. The colour changes for the header row and font have both worked.

Any ideas?

Scripts being used are:

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" 
type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("div.ms-vh-div:contains('Topic')").css("width", "500px");});
</script>

and

    <style>
.ms-viewheadertr a,
.ms-viewheadertr div {
color: white;
}
.ms-vh2 {
font-size: 10pt ! important; }
.ms-vh {
font-size: 10pt ! important; }
.ms-viewheadertr {
font-size: 10pt ! important; }
.ms-viewheadertr {
background-color: #00646e; }
</style>
6
  • can you console log $("div.ms-vh-div:contains('Topic')").length? Commented Jul 20, 2017 at 10:46
  • I've never used that function before - would I add "//length" to the end of the script and then have a new script console.log(length)? Commented Jul 20, 2017 at 11:20
  • just open developer tools of your web browser (press F12 function key), and under console tab write the above code i.e. $("div.ms-vh-div:contains('Topic')").length and see what is the output. If it is 0 you dont have that element on page. Commented Jul 20, 2017 at 11:35
  • oh that's easier than I thought it would be! It comes back with syntax error. I tried it with another columns details to make sure I was doing it correctly, it came back with 1. Commented Jul 20, 2017 at 11:47
  • Arey you sure it return a syntax error? Coz the above never never gives syntax error, it'll give the length as a number greater than or equal to 0 Commented Jul 20, 2017 at 11:54

2 Answers 2

2

Problem Solved. I have faced these situation multiple times and solved by using simple styling. Here I have picked up the header element by its position. Here the column MLOT (multiple Line of Text) is at 7th position. You can choose based on your field's sequence. I have used Script editor web part for this. pls Refer below script:

<style type="text/css">
.ms-listviewtable thead tr th:nth-child(7){
    color: red !important;
    width: 250px !important;
    font-size: xx-large !important;
}
</style> 

Screen Shot:

enter image description here

2
  • Is there a limit on the column width? Commented Jul 20, 2017 at 13:37
  • No limits on column width.
    – DvG
    Commented Jul 21, 2017 at 9:07
0

Put a script editor web part on the page and add following code. This will change the header styling.

<style>
.ms-listviewtable th{font-size: 24px;}
</style>

If you want to change the header of only one column then use script suggested by @DvG

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.