Column width resize in modern list

Iron Contributor

I am using modern list, and it is truly great, very well designed.

 

Anyway, I am using 6~7 columns, and "title" column's width is unnecessarily long, thus i have to scroll right to see entire columns.

 

I've tried resize title column's width and saved it, but when I go back and come again, width sizing is not saved.

 

Is there any way to save this resized width or setting defalut width of columns?

61 Replies

this really is total crap. very sad.

So for a proper solution we would need:

 

  1. Don't put a min-width on Title column. (Sometimes a title can be just a ID so why waste so much space? having a min-width is pointless and looks unprofessional)
  2. Allow saving width for the Web Part (List Preview)

Doesnt really seem that big of an update. Perhaps we'll get some action in 2020.

I was able to expand the column and "save view as" and it keeps the width. I can leave and go back to the list and it's still there. However I don't know how long it'll last. :\

In my tenant, it column width still doesn't stick when list is embedded on a page, even when a specific view is made for embedding.  From what I understand (preview) in the web part name means Microsoft are still working on this web part.  Can't recall seeing this web part mentioned in the Roadmap, so hard to know when something will be done. 

A simple workaround, just in case someone hasn't discovered yet.

 

step1. Create another column, and name it similar to the title column you need, with a calculated value =[title column]

step2. In your required list view, exclude the original Title column and include this calculated column ordered at first place (as was the original title column)

step3. We can now change the title column width

not a good solution as you lose the (link to edit item)

 

I did use this solution with some fancy Json Formatting to kind of duplicate it, but it was a bit of a huge pain.

end of 2018 and you can't still do any table formatting using standard UI on Sharepoint online. not speaking about creating 'responsive table'. What's wrong? was thinking responsive pages are the standard for many years now. am I wrong?

I tried a few different ideas before I saw Sophia's response here, simply resizing and then saving the view again. I had a coworker go look at it and it saved the width for him, too. Unless for some reason it gets lost over time, that seems to be pretty great. I never saw any announcements about this rolling out and neither did my coworker, but it definitely solves a problem for us.

 

It is only fixed width as far as I can tell. It would be possibly helpful in some scenarios if we could say "the width of the longest item in this column", but that's not a big deal. 

 

Side note: I did try this JSON for a column:

 

{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"width": "100%"
}
}
 
That was nice on file name fields in that it would show the entire filename, broken down onto the next line if necessary, instead of it disappearing behind an ellipses. But the trade-off was losing the sharing button and link to open (you can still double-click the row to open), so it's still not as good as resizing the column and saving the view again.

For reasons unknown to me we don't have designer enabled on some of the sites I manage. The easiest way I have found to set column width is to use a combination of calculated fields and CSS; instead of displaying the field directly refer to the fields you want to display in a calculated field encapsulated in a <div>:

 

Note - for some reason I can only get this to work if I set the same CSS in a class and by id. I have no idea why, so it is not optional to use one or the other; you have to use both as below.

 

Calculated field formula:

=CONCATENATE("<div class='divName' id='divName'>,[Field to display],"</div>")

 

CSS

<style type='text/css'>

 #divName{
  width: 250px;
/* any other styling you wish */}
 .divName{
  width: 250px;
/* any other styling you wish */ }

</style>

 

HTML to embed in a script editor web part somewhere on the page

<link href="address of css file" rel="stylesheet" type="text/css" media="all"> 

 

One of the other advantages of this is that you can easily change the width at any time by editing the css - I guess you could also just add style='width: nnnpx;' somewhere within the calculated div formula itself, but the above is the way I do it.

The main downside of this is it will not easily work for people or Rich text fields where other workarounds are required to get the to work in a calculated field in the first place.

 

Now if someone can tell me why have to set the css twice for it to work it would be great!

Very clever...

Thank you.
If I only new why every pain in Sharepoint has to be resolved through additional columns, why Microsoft can't make it work in the original column

User Voice:

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/32843206-customiz...

 

The long list of related user voice threads speaks about the user demand for a solution. 

 

I would be grateful for some MS comment on this issue.

@DavidVs 

Not sure if you saw these posts recently. There is a way of resizing column widths and to make them stay across refreshes and sessions.

 

  • Change width manually by dragging column divider as usual
  • The view name in the 'view dropdown' shows a '*' next to it, meaning it is unsaved.
  • Click the view dropdown -> 'Save view as'.
  • Choose a new view name, or save using the same name for overwriting the current view.

 

From blog post:

https://blog.ciaops.com/2018/05/12/saving-custom-columns-widths-with-sharepoint-online/

 

As this post on UserVoice states, it is not very discoverable / intuitive though.

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/33079627-column-w...

@AbhishekGarg It's been like this for a long time.

The issue is you cant reduce the size of the TITLE field smaller than a certain size.

Come on! This is a simple request!!

2021 here and still no solution. I build custom SharePoint sites to manage my companies data. Every time I embed a SharePoint List the column sizes are all terrible. I can customize and save it for myself, but it only applies to me. When I am on Teams calls watching other users navigate my sites its very disappointing because the average user doesn't even know they can resize the columns. File names and Titles are always cut off. This is insane. If I save a view, at the very least it should be a public view that applies to everyone. Easy fix there, no need for JSON programming, but I'll take anything at this point.

@주현 김 

Have you tried formatting the column with custom JSON? The Microsoft 365 PnP Blog a nice introduction article about Modern SharePoint List Formatting 
This doesn't specifically talk about setting column widths, but setting column widths using css in your JSON is among the many styling things you can do. 

This is such an obvious feature. Please microsoft give us something so we can control this.
BUMP!

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/43399098-sharepoi...

It's not possible. I've been trying for ages. Vote at the site above to put an end to this.

My experience with the changing column widths using the JSON column formatter is that it changes the width of the text within the column, but not the width of the column itself. So if I set a column width for a description field to 500px, the default for other users would be a small column where the text was horizontally cut off until you dragged the column itself wider. Example of what I've tried that is still unsatisfactory below.

 

{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"width": "500px"
}
}
 
Still doesn't seem like there's a way for list/library web parts to have a persistent column width across users, which makes longer text fields look pretty terrible for users that haven't manually resized, no matter how you format the json (unless I'm missing another way of changing the actual column width in the json formatter).
I can't believe there's still no solution to this. I went to vote on the issue and the site was deactivated.