Fixed Column Header Width in Lists

Question

How can I increase the width of the column headers in a Sharepoint List? I have added JSON codes in formatting ("width": "250pt" with wrap text) and this only changes the text in the field, not the whole column/header. The text still cuts off.
I want to be able to increase the entire column including the header with wrapped text publicly for all users. I want this to be the visible view when the list is embedded in a web part.

Any help would be appreciated. Thanks!!

Answer 1

Hi @Sophie Ellington ,

As per my knowledge, unfortunately there is currently no way to set the OOB format column headers width to a fixed value using JSON. Since that in a SharePoint Online list, we can change the width of the column header with a easy drag. So, why not?

Here is an alternative for you. To customize a list view based on your own needs, you can achieve it with the help of the syntax hideColumnHeader. Please refer to the JSON code below.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",  
  "hideColumnHeader": true,  
  "hideSelection": false,  
  "rowFormatter": {  
    "elmType": "div",  
    "style": {  
      "display": "flex",  
      "flex-direction": "column",  
      "align-items": "flex-start"  
    },  
    "children": [  
      {  
        "elmType": "div",  
        "attributes": {  
          "class": "ms-fontColor-black"  
        },  
        "style": {  
          "display": "=if(@rowIndex == 0, 'flex', 'none')",  
          "font-weight": "bold",  
          "font-size": "18px",  
          "width": "100%",  
          "padding": "4px"  
        },  
        "children": [  
          {  
            "elmType": "div",  
            "txtContent": "Title",  
            "style": {  
              "width": "80px"  
            }  
          },  
          {  
            "elmType": "div",  
            "txtContent": "Departure",  
            "style": {  
              "width": "100px"  
            }  
          },  
          {  
            "elmType": "div",  
            "txtContent": "Arrival",  
            "style": {  
              "width": "100px"  
            }  
          }  
        ]  
      },  
      {  
        "elmType": "div",  
        "attributes": {  
          "class": "sp-row-listpadding"  
        },  
        "children": [  
          {  
            "elmType": "div",  
            "style": {  
              "text-align": "left"  
            },  
            "children": [  
              {  
                "elmType": "div",  
                "style": {  
                  "float": "left",  
                  "width": "80px",  
                  "font-size": "1.2em",  
                  "margin-left": "2px"  
                },  
                "attributes": {  
                  "class": "sp-row-title"  
                },  
                "txtContent": "[$Title]"  
              },  
              {  
                "elmType": "div",  
                "style": {  
                  "float": "left",  
                  "width": "100px",  
                  "font-size": "1.2em",  
                  "margin-left": "2px"  
                },  
                "attributes": {  
                  "class": "sp-row-listPadding"  
                },  
                "txtContent": "[$Departure]"  
              },  
              {  
                "elmType": "div",  
                "style": {  
                  "width": "100px",  
                  "float": "left",  
                  "font-size": "1.2em",  
                  "margin-left": "2px"  
                },  
                "attributes": {  
                  "class": "sp-row-listPadding"  
                },  
                "txtContent": "[$Arrival]"  
              }  
            ]  
          }  
        ]  
      }  
    ]  
  }  
}  

The list view will shown as below after applying above code to the list view:

For example, if you want to change the header width of the column "Title", you can modify attribute "width" in the code:

{  
    "elmType": "div",  
    "txtContent": "Title",  
    "style": {  
        "width": "100px"  
    }  
},  

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.