0

I am having trouble using style tags to change the font color in the heading of my list in quick edit view. This problem only occurs in quick edit view...I have successfully changed the header properties (color, font, size, etc.) in non-quick edit views using the following code:

.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink, .ms-vh2 a, .ms-vh, .ms-vh a { font-weight:bold; color:white; font-size:1.05em; }

What am I missing? Is there a different CSS class that deals with the headers in quick edit?

Update: Using the following code has been recommended but still does not modify the text in the column headers in quick edit view.

  /* Change column header font properties */

.ms-vh, .ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink, th[Title='Justification'] { font-weight:bold; color:white !important; font-size:1.05em; }

Here is what it looks like:

Headers in Quick Edit View

Here is how I would like it to look (non-quick edit appearance): Normal View

2 Answers 2

0

In case anyone still needs this solution:

.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink,  **.ms-spGrid-HeaderContentStyle a** {
    font-weight:bold;
    color:white !important;
    font-size:17px;
}
0

Using the below css we can change the column header font in SharePoint datasheet or quick edit view :

Datasheet/Quick Edit Views CSS

<style>
th[Title='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

Standard Views (not quick edit) CSS

 <style>
th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

All Views CSS

    <style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

Multiple columns

For multiple column width adjustments, just include another block for each column as seen here:

    <style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
th[Title='Other Column'],th.ms-vh2-nofilter div[DisplayName='Other Column'],th.ms-vh2 div[DisplayName='Other Column']{
    min-width:200px!important;
    width:200px!important;
}
</style>

Source :

Adjust column widths in classic SharePoint lists using CSS (including “Quick Edit”/datasheet views)

1
  • Thank you for the assistance. Unfortunately, though, adding th[Title=‘Justification’] doesn’t do the trick. I think this class adjusts the header’s column width, but not the properties of the text in the header. Mar 27, 2020 at 17:44

Your Answer

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

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