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
Come on! This is a simple request!!
- 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.
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.
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.
- 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.
