I would like to use a web part on a communication site to display three columns of information. Ideally, I'd be able to put this into a 1/3 width zone, however, when I do this currently, the font size and spacing between columns is large enough that all three columns cannot be viewed without scrolling via the scroll bar that appears at the bottom of the web part. I was hoping to use JSON formatting to reduce the font size (changing column size would be a bonus) in order to get all three columns to display without scrolling, but have had no luck. Here are the things that I've tried:
- Per How to change font size for all rows in a list using JSON on SP Online via Format View, I tried to use additionalRowFormat to change font size. It actually worked, however, I was wanting to decrease the font size to 10pt and sp-field-fontSize10 does not exist. I also could not find another class that I could apply with a 10pt font size.
- Use the following JSON to apply a CSS style to the elements assuming it would overwrite the existing CSS formatting:
I'm not very well versed in CSS, but I'm guessing that since this did not work, the existing style is taking precedence over the style being applied via this formatting and I don't know how to change that.
- Use rowFormatter to create my own view. This worked very well, however, I imagine if there are a number of rows, it will simply extend the height of the web part to display all of the data rather than limiting to a maximum number of rows (say 20) and using pagination to view the remaining rows.
I saw there was a solution elsewhere that used an SPFx extension that would inject custom CSS, but I'd prefer to stay away from that and try to accomplish this using out of the box functionality/techniques if possible. Any suggestions on how I can reduce the font size for this web part? Thanks in advance for your help!