Forum Discussion

주현 김's avatar
주현 김
Iron Contributor
Aug 19, 2016

Column width resize in modern list

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 colu...
SharePoint Online
Sophia Johnson's avatar
Sophia Johnson
Copper Contributor
Aug 14, 2018

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. :-/

Ryan Robinson's avatar
Ryan Robinson
Copper Contributor
Nov 20, 2018

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.
  • SimonP's avatar
    SimonP
    Copper Contributor
    Nov 30, 2018

    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!

Resources