Changing columns width in Sharepoint Task Lists - Classic Experience

Question

Hi folks!

First let's get a few things straight.

1 - I can change the list configuration between NEW and CLASSIC experience;

2 - In a list that uses the NEW experience, I can change the width of the columns.

However.... I am using Microsoft Project to manage a list and:

3 - It automatically sets by default the Classic experience and I cannot change the width of the columns. And by default, those large columns consumes a lot of usefull space for my users.

4 - I have already tried to change from CLASSIC to NEW experience. However, in this way I lose my timeline and (worse) my activities names. Every activity is changed to their id numbers.

5 - I have already tried to figure out a solution to this issue, and as far as I could find information in the support forum, this feature is broken.

So, in the end... That is why I need to figure out a way to change the columns width in the Classic view. Is there a way?

Answer 1

Dear Ivan,

Thanks for posting the thread on our forum.

As you are using the task list app in SharePoint Online, the type of the list is showed in the classic view by default and it will show the incorrect values on the list page when you change the classic experience to the modern experience in SharePoint Online.

As a workaround, you can create a normal list and add the same columns as the task list in your environment and then the normal list will be opened in the modern SharePoint experience by default. Then you can use the out-of-the-box way to adjust the column width.

If you want to stay with the task list, you may use the CSS code to adjust the column width. To insert the CSS code, you need to contact the administrator to run Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0 in SharePoint Online Management Shell on the site to let you use the Script Editor web part. Then you can add the following example code in the web part to see the result.

<style>

.ms-vh-div[DisplayName='Task Name']

{

    width : 100px !important;

}

.ms-vh-div[DisplayName='Due Date']

{

    width : 100px !important;

}

.ms-vh-div[DisplayName='Assigned To']

{

    width : 100px !important;

}

</style>

Before inserting the code.

After inserting the code.

You can change the code values based on your requirements to see the result.

Best Regards,

Cliff

Answer 2

Ivan --

I regret to tell you that I cannot find any way to work around your problem with the Classic view.  I, too, am unable to change column widths in the Classic view, so I strongly suspect there is no way to accomplish this.  Sorry, but hope this helps.

Answer 3

Dear Ivan,

Have you tried the suggestions above? Welcome to share any updates when you have time if you need further help on this issue.

Best Regards,

Cliff