Forum Discussion
Column width resize in modern list
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. :-/
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:
{"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json","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!
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.
