Fixed Column Header Width in Lists

Sophie Ellington 1 Reputation point
2021-10-14T22:15:45.3+00:00

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!!

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,221 questions
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,628 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,668 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Allen Xu_MSFT 13,776 Reputation points
    2021-10-15T02:47:21.323+00:00

    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:
    140694-image.png

    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.