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

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'>
.ms-vh-div[DisplayName='<ColumnName>']
{
width:____px;
}
</style>

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

 

Thanks

 

Mathieu

All,

 

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

Capture.JPG

 

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

Thanks

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?