Column width resize in modern list

Frequent 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?

48 Replies

Juhyun Kim : Each column will auto resized based on css , it is designed like that. Add a Content Editor Web Part in your page and modify the core CSS file.

<style type='text/css'>

Use developer tool to check the exact css file

Thanks. But it seems your solution only can be applied in web part.


I was talking, sharepoint modern list page.


I do not see css editing option in modern list page.


Please look for attached screenshot.

There is no option for resize the width in the each column by default in modern list. But we can implement the changes in master-page(Javascript+Css) level for particular list as per your wish. But it is not advisable until it is too important.

Bringing this topic up, hoping that someone have found a solution in the past half year. :)

I would be happy with the out of box column width adjusting algorithm if it would be smarter, or at least I could save the view with the manually adjusted width settings, but apparently it's not the case.

If you are using Classic sites + Modern List, then you can either try with some script in Master Page (Not recommeded)or Custom Action with script block to change the width. CEWP/Script editor approach wont work, you cannot add webpart to the modern list page. I said try, because the modern list is rendered through React DOM, finding the post render state is really hard. 


If you are Modern team site + Modern List, there is no option to adding any script through Master page or Custom action.

Great! That works for me for all columns on the list except the first one with items with ellipsis (...). However, the first column width shrinks as other columns width increases, so it's a kind of work around.

This problem is truly unacceptable....and makes moder list unusable.  :(


For example, I have a a short primary title column label (just a few letters).  My items also have very few letters but the default width of that column is 5X too wide. :(    Furthermore, the column width is not saved for viewers.


This problem has been around since day one...  Please FIX asap.

A work around. If you choose multiple lines of text, then choose 1 the column shrinks. Not perfect but better. The idea of having to use java, css or any code just to change a column width is ridiculous. Please sort this so ordinary non developer types can change widths easily.  If sharepoint is truly going to appeal to the massess it must get easier to do the basics!

I've had the same problem with column width in modern lists since day 1. However, I saw today that "Column Formatting" would be rolling out to Office 365 customers next month. I don't know if it will let me control the width of the first column, but I'm going to give it a try when it rolls out to my tenant. https://support.office.com/en-us/article/Column-formatting-1f927342-2bed-4745-b727-ff8b7ff96b22?ui=e... 

If it works I'll report back to this thread.

Agree, this is an issue and makes using modern list view very challenging.   I am having to force users to classic view as a work-around.  

I also agree with the above comments.


Not having the columns resize to fir the browser window seems such an oversight!


Please Microsoft - get these little things right.

Even in their example on that page the Title column is way too wide!!!

I agree. There has to be a way to save resized columns in a list view. It would not be so bad if you only had to do it once, but having to resize each time you visit the page causes people to look elsewhere for the content.

Hi all,

After having seen the possibilities of formatting columns here : https://docs.microsoft.com/fr-ch/sharepoint/dev/declarative-customization/column-formatting

I wonder if there is a way to use these functionalities to do something, I do not have enough knowledge to find something

If somebody can paste a bit of json... that could help resizing these columns ...







Just to come back to my previous post ... after some trials and this code :



I found out that only the color tag is working. none of the other are doing anything ...

Does anybody have a clue why ?

Just for info, I do not have access to SharePoint designer


You have an extra "}" after "color" value.

I do not think it will work as column customisations only create child items within the parent where the actual width is set. With column customisation JSON you cannot change the appearence of the parent item.

Having spent a number of hours (days) learning more about what one can customise, I did not yet find any solution for this problem.

I don't think it will not work as the header of the columns have the set width and column formatting JSON has only control on the specific column not the header.   You can reduce the width but not increase.

Hard to understand the logic behind this. Re-sizable columns seems... obvious. At the moment I'm stuck with truncated columns in web parts on a Communication Site. It's contrary to years of best practice, why has MS stuck their heels in the ground on this one?

Its quite absurd that Microsoft continues to push out products that have many commonly used features and tools missing. Or they make tasks so time consuming to perform. Who really wants to spend countless hours learning and writing scripts? Its like we are stepping back in time, gone are the days of using a GUI to do simple tasks. If it wasn't for CRM and ERP systems that only runs on Windows I would propose the company I work for to swift over to Linux or Mac.

Am I to understand that I cannot make a SharePoint column wider using JSON? Is that why I have wasted so much time looking for examples?


So far I have not seen any solution that will resize the columns to fit in one screen or even to just reduce the size of the first column. If anyone has figured this out, please jump in and explain the solution. Our current "solution" is to use the Classic list mode. We miss out on new features, but at least our users are not complaining about how bad the list is displayed.

The only way I found to force a column to be wider in a sharepoint list is to add a load of characters to the header e.g. -------- Description -------- this forces the minimum width.


This does screw up other style views (e.g. Boxed or Preview), so maybe best to create a 2nd calculated column called widedescription and display the wide one only when necessary.

This is really smart and might help in a lot of cases. Thanks for sharing

I have whilst it is an ingenious workaround, it is just that - a workaround.

Come on Microsoft! Surely having the ability to set column widths isn't beyond you. And no, requiring coding or hacks to achieve this is not acceptable.

While the latest suggestion offered will make a column larger there still appears to be no way to make the first column smaller and making columns larger does not make columns fit on a single screen. So, this will not work for our needs. Thanks for sharing the solution though. Some people might just be looking for a way to make columns larger.

Really important to (re-)style columns/views. Because the current styling is creating unwanted behaviours. Btw an option todo a css overwrite in general would be great, then we don't have to wait all this time...

I agree with almost everyone in this thread. This is making Sharepoint Online with Modern Views an extremely tough sell to anyone I'm trying to onboard.


This is just one of a multitude of items that cannot be edited. I understand that reducing end user options makes for a more affordable product, easier to scale, easier to upgrade etc but this is bordering ridiculous.


Let's see those teams working towards functionality that should have been present out of the box.

Why does Microsoft insist on taking 1 step forward and 2 steps back. Modern style is great, except there is no ability to customize which is stupid.

Then they make the title column wide for some reason without the ability to change it.

I give 1 Vote to fix this, easiest way, and best way, give us back access to the CSS!


In saying that, I've found a (annoying) workaround.


Create a Calculated Column, make the value equal the Title value. Then update the JSON FORMATTER to make it a link if required.

Then hide the title in the view and show the calculated one in its place.


now the kicker, I couldnt figure out how to get the ID in the JSON Formatter, so I had to make a middle redirect page, which translated the Title into an ID and forwarded it to the correct place. (this step is only required if you need the title to link to edit the list item)

just with the above, I managed to hack a way to get id as well..

There maybe a better way (I really hope there is) but I made ANOTHER calculated field, and made it =Id I called this IdCopy, then in the json formatter where I set the link i did this:

"debugMode": true,
"elmType": "a",
"attributes": {
"target": "_self",
"href": {
"operator": "+",
"operands": [
"txtContent": "@currentField"

ALOT of UGLY work just to get it to stop taking up a set width.

Well, just a about a year I think and still nothing. Some elaborate work arounds but really? I would like to just be able to set the width as an attribute when I set up the column. Not only do I not code but I want users to take control of their own lists. Are all 400+ members of my organisation to learn Java or CSS? 

Well, just a about a year I think and still nothing. Some elaborate work arounds but really? I would like to just be able to set the width as an attribute when I set up the column. Not only do I not code but I want users to take control of their own lists. Are all 400+ members of my organisation to learn Java or CSS? 

100% agree, looking forward to a proper solution

I doubt Microsoft cares enough to resolve this issue. They haven't even fixed ongoing issues that sprung up over a decade ago.


I'm expecting them to wait until enough clients move over to their online SharePoint services at which point they'll decide to discontinue providing it.

Dear Microsoft,


Please could you provide an update to this topic. It has been nearly 2 years now and there has been no feedback.


Thank you,





I believe that this has been resolved as I noticed a recent change in behaviour . Drag column to desired width and save view . This then appears to stick across different browsers as well .

You're right its half fixed, the widths do save (which is great). but its still not possible to make the title field smaller

Title Column still cannot be edited at all.


Widths do save if you're accessing the list itself but I, and I assume many others, are going to be using the List (Preview) to embed it on a page. This is not editable and saved views do not include column widths. 


Not even close to resolved.

Totally agree. You still cannot change the width of column on the list (preview) webpart on the page. When can Microsoft address it?

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>")



<style type='text/css'>

  width: 250px;
/* any other styling you wish */}
  width: 250px;
/* any other styling you wish */ }



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!