Forum Discussion
Column width resize in modern list
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.
