List style in modern UI

%3CLINGO-SUB%20id%3D%22lingo-sub-1169189%22%20slang%3D%22en-US%22%3EList%20style%20in%20modern%20UI%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1169189%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'd%20like%20to%20reduce%20the%20padding%20of%20the%20cells%20in%20a%20Sharepoint%20list.%3C%2FP%3E%3CP%3EI%20tried%20playing%20around%20with%20the%20list%20view%20styles%2C%20but%20I%20see%20that%20they%20only%20affect%20the%20list%20in%20Classic%20View.%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20Why%20is%20it%20only%20in%20Classic%20view%20and%20not%20in%20the%20modern%20one%3F%3C%2FP%3E%3CP%3E2.%20Is%20there%20a%20way%20to%20change%20the%20display%20of%20the%20list%20so%20that%20more%20lines%20are%20shown%20on%20one%20view%3F%20(the%20question%20is%20not%20about%20number%20of%20lines%20per%20page...%20I%20know%20how%20to%20define%20it%20-%20but%20it's%20for%20seeing%20more%20lines%20without%20having%20to%20scroll%20down)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1169189%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdmin%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1170019%22%20slang%3D%22en-US%22%3ERe%3A%20List%20style%20in%20modern%20UI%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1170019%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F554671%22%20target%3D%22_blank%22%3E%40ShiranE%3C%2FA%3E%26nbsp%3B%20modern%20SharePoint%20lists%20are%20very%20different%20to%20classic%20lists%20and%20don't%20work%20the%20same.%20But%20actually%20I%20find%20I%20can%20do%20a%20lot%20more%20with%20the%20formatting%20on%20a%20modern%20list%20than%20I%20ever%20could%20with%20a%20classic%20list.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20change%20the%20formatting%20of%20a%20column%20by%20clicking%20the%20dropdown%20in%20the%20column%20header%2C%20select%20Column%20settings%20and%20select%20Format%20this%20column.%20That%20opens%20a%20panel%20for%20you%20to%20type%20in%2Fcopy%20JSON%20code.%20As%20you'll%20see%20in%20the%20image%20below%20I've%20reduced%20the%20padding-left%26nbsp%3B%20of%20the%20County%20column%20to%202px%2C%26nbsp%3B%20set%20the%20color%20to%20a%20bright%20green%20and%20put%20a%20box%20round%20it%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%220-padding.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170924iCD51CE5AB838A2FA%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%220-padding.png%22%20alt%3D%220-padding.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20JSON%20code%20for%20that%20was%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22debugMode%22%3A%20true%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22padding-left%22%3A%20%222px%22%2C%3CBR%20%2F%3E%22color%22%3A%20%22%2347a155%22%2C%3CBR%20%2F%3E%22border%22%3A%20%221px%20solid%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20are%20lots%20of%20ways%20you%20can%20format%20a%20column%20and%20some%20column%20types%20will%20have%20the%20formatting%20template%20done%20for%20you%2C%20others%20you%20have%20to%20enter%20the%20JSON%20yourself%20as%20I've%20done%20above.%3C%2FP%3E%3CP%3EReducing%20the%20row%20height%20so%20you%20see%20more%20rows%20on%20screen%20in%20a%20modern%20list%20is%20not%20something%20that%20appears%20to%20be%20possible%20at%20the%20moment.%20Microsoft%20seem%20to%20have%20locked%20down%20the%20height%20to%20a%20minimum%20of%2042px%20and%20I've%20not%20found%20a%20way%20to%20change%20that.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3C%2FP%3E%3CP%3ELos%20Gallardos%3CBR%20%2F%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hi,

 

I'd like to reduce the padding of the cells in a Sharepoint list.

I tried playing around with the list view styles, but I see that they only affect the list in Classic View. 

1. Why is it only in Classic view and not in the modern one?

2. Is there a way to change the display of the list so that more lines are shown on one view? (the question is not about number of lines per page... I know how to define it - but it's for seeing more lines without having to scroll down)

 

Thanks!

1 Reply
Highlighted

@ShiranE  modern SharePoint lists are very different to classic lists and don't work the same. But actually I find I can do a lot more with the formatting on a modern list than I ever could with a classic list.

 

You change the formatting of a column by clicking the dropdown in the column header, select Column settings and select Format this column. That opens a panel for you to type in/copy JSON code. As you'll see in the image below I've reduced the padding-left  of the County column to 2px,  set the color to a bright green and put a box round it:

0-padding.png

 

The JSON code for that was:

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"padding-left": "2px",
"color": "#47a155",
"border": "1px solid"
}
}

 

There are lots of ways you can format a column and some column types will have the formatting template done for you, others you have to enter the JSON yourself as I've done above.

Reducing the row height so you see more rows on screen in a modern list is not something that appears to be possible at the moment. Microsoft seem to have locked down the height to a minimum of 42px and I've not found a way to change that.

 

Rob

Los Gallardos
Microsoft Power Automate Community Super User