How do I edit column header font in “Quick Edit” view?
-
08-02-2021 - |
質問
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:
Here is how I would like it to look (non-quick edit appearance):
解決
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;
}
他のヒント
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)