SharePoint Lists Web Part Column Width

Question

I have a SharePoint list that contains Birthdays of employees. I want to use a list web part to display those birthdays in a homepage. I have views for each month.

The problem arises when I try to format the web part. It seems like nothing I do to the list or the views affects the column width in the web part.

I have tried to shorten the column width in the list, and while this does shorten the column width in the web part for myself, for some reason no other user can see the change.

I have updated the JSON script to try and format the lists column width. It works, as the names have been wrapped if they exceed the width I set, but it fails to shorten the column width in the web part.

As you can see above, the dates are getting cut off.

I have found no way to shorten the web part's column width. Nothing I do to the list changes the web parts column width, and there are no options to change the column width in the 'edit' section for the web part.

Is there a way to change the list web part's column width, or will I have to deal with the dates being cutoff?

Answer 1

Dear Seth Kessler,

Good day! Thank you for posting to Microsoft Community. We are happy to help you.

As per your description, please don’t worry, we can work together to narrow down and resolve the situation.

Based on my test result, when I tried to use ‘column-width’ below JSON to change the width and it work for me

{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json”,
“elmType”: “div”,
“txtContent”: “@currentField”,
“style”: {
“width”: “100%”,
“white-space”: “nowrap”
}
}

For reference: Use column formatting to customize SharePoint

As the column will auto resized based on CSS code. Add an Editor Web Part in your SharePoint page and modify the core CSS. You can add the script editor web part and add the code below to the script editor web part.

<style type='text/css'>
.ms-vh-div[DisplayName='<ColumnName>']
{
  width:250px;
}
</style>

For your reference similar thread:

Increase column width in a list view web part

How to increase the width of a SharePoint Online List column in a List WebPart

Your understanding and patience will be highly appreciated. I hope that you are keeping safe and well!

Sincerely,

Waqas Muhammad

***Note: In the event that you're unable to reply to this thread, please ensure that your Email address is verified in the Community Website by clicking on Your Account Name > "My Profile" > "Edit Profile" > Add your Email Address > tick "Receive email notifications" checkbox > click on "Save".***