none
Sharepoint 2016 Adjust Column Width in List

    Question

  • I'm trying to adjust a few different columns width in Sharepoint 2016. 

    I've tried the following information, but I can never find my Column name in #7. 

    1. Go to the SharePoint list, go to List

    2. Click on  Edit list in SharePoint designer

    3. Go to the view where you want the column’s width to be increased.

    4. Move cursor downwards in the code and stop when the List view tools tab gets enabled.

    5. Go to  Design and click on Customize XSLT, there click on  customize entire view.

    6. You can see that now entire codes will be visible.

    7. For example I want to increase the width of column “status”. I find status in the code and stop when I see the following set of code:

    <xsl:template name="FieldRef_header.Description" ddwrt:dvt_mode="header" match="FieldRef[@Name='Description']" mode="header" ddwrt:ghost="hide">

        <th nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">

          <xsl:attribute name="class">

    8. Now, I change the code:

    <th nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">

    To

    <th scope="col" onmouseover="OnChildColumn(this)" style ="width: 350px; white-space:normal;min-width:350px">

    I've tried every other trick I could find online and nothing woks. Also, nothing is written for 2016 about this issue, it;s all about 2010 and 2013. 

    Monday, November 7, 2016 6:58 PM

Answers

  • Hi,

    We can add the following CSS style into a content editor web part in your list view page to achieve it.

    <style>
    th.ms-vh2 div[DisplayName='Status']{
    	min-width:350px !important;
    	width:350px !important;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Sepling Wednesday, November 9, 2016 4:32 PM
    Tuesday, November 8, 2016 1:32 AM
    Moderator

All replies

  • Hi,

    We can add the following CSS style into a content editor web part in your list view page to achieve it.

    <style>
    th.ms-vh2 div[DisplayName='Status']{
    	min-width:350px !important;
    	width:350px !important;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Sepling Wednesday, November 9, 2016 4:32 PM
    Tuesday, November 8, 2016 1:32 AM
    Moderator
  • This worked Perfect from SharePoint 2016. Thanks for your help!

    Open List Page

    Select EDIT PAGE

    Select INCERT

    Add WEB PART 

    Select MEDIDA AND CONTENT

    Select SCRIPT EDITOR

    Select ADD

    Script Editor will now appear. Select EDIT SNIPPET

    Now I can past the code you gave me and alter the name "Status" and px fit my needs.

    <style>
    th.ms-vh2 div[DisplayName='Status']{
    min-width:350px !important;
    width:350px !important;
    }
    </style>

    Wednesday, November 9, 2016 4:39 PM
  • I am trying to do this exact thing, but when I change the DisplayName to 'Notes' ( The column name I am trying to adjust) nothing happens. If I leave Status in there, it adjust the status column just fine. I tried looking for the internal column name, in case that was different, but it is showing as Notes also. How do I get this to see my Notes column? 


    • Edited by Erin Bain Tuesday, October 10, 2017 8:05 PM
    Tuesday, October 10, 2017 8:05 PM
  • It isn't working for me either
    Monday, March 26, 2018 8:05 PM
  • It apparently does not work with multiple lines on single line of text.
    Thursday, April 19, 2018 1:58 PM
  • Sepling, I am somehow not able to add the web part.

    Steps followed were..

    1. Chose "List" option at the top of List Web Page.

    2. There was no "Edit Page" option here but "Edit List"

    3. Chose "Edit List" which opens the site in SharePoint Designer.

    4. Chose "List and Libraries" option at the left side of the tool.

    5. Chose the particular list & view where I am looking for the change.

    6. Post that the top ribbon which opens in SPO Designer is like this.. No possibility to Insert a Web Part.

    7. When I checked the Web Part menu also, the available options go as below..

    Kindly advise if were also having the same views or different than this? How do I achieve the target now for changing the column width?

    Saturday, September 15, 2018 7:31 AM