Search code examples
jsonformattingsharepoint-onlinesharepoint-list

Sharepoint online list specify column width and row height with json

I am trying to format a SharePoint Online modern list using json and I couldn't find a way to specify a custom column width and row height. So far it looks like this and users have to manually adjust column width.

enter image description here

My json code is this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "width": "200px",
    "white-space": "nowrap",
    "padding-left": "=if(indexOf(@currentField, ' ') == 1, '', if(indexOf(@currentField, ' ') == 3, '20px', '40px'))"
  }
}

Also, I couldn't find a way to make the list more compact. The default row height is too high.

How can I specify column width and row height?

I am new to SharePoint so any help will be appreciated. Thank you!

Solution

  • To specify the column width and row height, you need to add the property "width" and "height" in your json code.

    For exmaple:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
     "min-height":"1em",
    "height": "1em",
    "width": "100px"
  }
}

    Please refer to this article for more: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting