Increase Font Size of List Web Part

Copper Contributor

I am looking for code I can input to a script or content editor to increase the size of the font in a List web part since it is much smaller than all the other text on the page.

 

Does anyone know of a code I could use to do this?

13 Replies

@TheWhiteGoose99 What version of SharePoint are you using?

@Beau Cameron most recent version - sorry, I've lost track of which that is - but it is utilizing wiki pages, not modern pages

I suppose it's possible in the classic pages, but I don't recommend doing it... if it's an issue you'd like to fix on all classic pages, I suggest injecting the CSS using a user custom action instead of using Content Editor Web Parts.

However, I personally feel it's technical debt that isn't providing much value in return.




By most recent version you mean SharePoint Online? Are you talking about the new list WebPart?

@Juan Carlos González Martín yes, SharePoint online.  And I believe so, the new List webpart.

@TheWhiteGoose99 if you're using SharePoint Online, navigate to the list page and then select a column you want to change the font size to Column -> Column Settings -> Format This Column, a window appears on the right, Click Advanced Mode, and a text box appears for you to enter JSON code to manipulate the HTML. Copy and paste the Code snippet below into that JSON text box.

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"font-size": "18pt"
}
}

 

You can change the value "18pt" to whatever you want. The formatting settings will carry over to the Web part. Here's a link to more JSON formatting if you're interested. 

 

Edit: I realize that you said you were utilizing wiki pages? This method will work with Modern list pages. (Tested)

@Tyler_Tucker hey, this does increase the font for the actual list - but it doesn't seem to change the List webpart font size?

3 years later and your code still works like a charm. Thanks!

@Tyler_Tucker Very successful with changing Text size!! But was not successful in a "Person" column that is displaying Person bubbles.  When I use the Code snippet the bubbles change to [object Object]. Thanks for the support!

People Bubble.png

object OBJECT grab.png

@mdodge51  Same here, in my case I'm using the URL field  and instead of the URL I'm using the display field. Were you able to resolve this?

amazing!!!

@Wedini85  Were you able to fix this?  I'm running into the same issue.  Thanks. 

@aoconnor429 unfortunately not.