none
How to increase width of a list in SharePoint Designer 2013? RRS feed

Answers

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

    Regards,

    SAN


    Santhiya

    Tuesday, November 4, 2014 8:59 AM

All replies

  • First, although the design view has been removed from SPD 2013 the code view is still available and the post you are referring to is using the code view not the design view so SPD 2013 would still work.  However, one of the other changes in SharePoint 2013 is a move to more HTML 5 based encoding.  So I suspect that's why you aren't seeing the exact same code as in 2010.  The code probably looks different and the values may now be applied via a CSS class rather than coded inline but the solution is probably about the same.  However, I'm not aware of a specific blog post that will tell you exactly what and where to change it in 2013.  You'll need to learn how CSS operates and do some digging to figure out what code to override in 2013.

    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    Thursday, July 18, 2013 12:01 PM
  • Hello Paul,

    Yes you are write, the link I gave speaks about the code. But the whole set of code is missing and i do not have a single idea what to change, I am afraid if unknowingly i remove something then it will impact the web page.

    Can anyone still tell me what can be done to increase the width of the columns in the list with the help of SPD 2013?

    I even tried copying those set of codes from SPD 2010 to SPD 2013, but its not getting pasted. And I do not know how to figure it out.

    Any help will be greatly appreciated.

    Thanks,
    SAN


    Santhiya


    Friday, July 19, 2013 3:37 AM
  • Hi,

    Thank you for your post.

    I'm trying to involve someone familiar with this topic to further look at this issue. There might be some time delay. Appreciate your patience. You can refer to your previous post for updates:

    http://social.technet.microsoft.com/Forums/en-US/8b8e2f14-81ab-4d57-808b-d452001e0ccf/how-to-increase-width-of-a-list-in-sharepoint-designer-2013

    Thanks ,

    Entan Ming


    Entan Ming
    TechNet Community Support

    Friday, July 19, 2013 11:17 AM
    Moderator
  • Hello Ming,

    Thank you for getting help. I would greatly appreciate if i can find a solution soon.

    Regards,

    SAN


    Santhiya


    Monday, July 22, 2013 5:09 AM
    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">

    Regards,

    SAN


    Santhiya

    Tuesday, November 4, 2014 8:59 AM
  • Thank you San!

    The code you provided worked perfectly in SharePoint Designer 2013!  I was able to change/customize the width of each column in my Team site without difficulty.

    For instance, I would make the change in Designer for a specific column, then toggle back to my Team site, hit refresh, and then see the effects - making any adjustments as needed . . .

    Regards,

    - John

    Sunday, December 21, 2014 6:44 AM
  • Thank you John, i am happy that the instructions really helped.

    I did a little more research when sometimes the entire code is not visible, so users can now follow these instructions and can be able to see.

    So, when i click on the view where i want to edit the width of the column, i get a set of code (very less for the first time i open). Then i scroll down in the set of codes and move till i see "WebPartPages : XsltViewWebPart.

    Now again i see a few more lines of codes, this is not the end.

    If we see at the bottom of the page, there is a button called "Code". Click there and then go to Design and click on Customize XSLT, there click on customize entire view.

    TADA!!!! you entire code is visible now. Follow the same steps:

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

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

    It's simple now, isn't it?

    Thank you for marking this as an answer.

    Regards,

    SAN


    Santhiya

    Monday, December 22, 2014 4:18 AM
  • I've used these instructions and it worked perfectly.

    I would also like to reduce the size of a column but can't seem to get it to work.  How would I do this please?

    Thanks


    J Sykes

    Wednesday, January 7, 2015 12:00 PM
  • Thanks for posting this. I found that I was still missing the List View Tools ribbon tab. The trick was to right click on the code, then select tag properties. Then under Miscellaneous click "Server Render". Now I get all the code and the Customise XSLT option becomes available. The major downside here is that I've lost my grid view! I'll have to dig further on this. We need grid view.
    Wednesday, March 11, 2015 11:21 PM
  • Thank you, this worked
    Thursday, May 14, 2015 4:37 PM
  • This worked well for me when viewing the sharepoint list in a "standard method", however, when I try to used the view as a related link view (Parent-child type thing). The changes don't seem to have any affect. I've tried modifying within the webpart from Current View to the appropriately change columns, but it will not use the new column widths. 

    Any thoughts about how to use it here?

    Thanks

    Wednesday, June 10, 2015 4:36 PM
  • Hi,

    Thanks for the very helpful post. I was able to change the field lengths per my need but

    1. Add new item option was pushed below the list items

    2. The links to Views appearing above list items totally disappeared. No way to navigate to them :(

    Any ideas on that?

    Regards 

    Tuesday, September 8, 2015 9:57 AM
  • This approach does work. Two comments, one potentially a showstopper.

    1) Getting the List View Tools ribbon to show in Designer 2013 is a trick: http://sharepoint.stackexchange.com/questions/71977/sharepoint-designer-2013-xslt-list-view-options-ribbon-option-is-not-showing

    2) Saving the modified view from Designer apparently kills JSLink - it will not load the script thereafter! See the last comment on: http://msdev.developer-works.com/article/29786357/sharepont+2013+JSLink+property+isn't+working . One clue to this is that, when editing the webpart, checkboxes in the Misc. section below "Server Render" will not show. It does not seem recoverable. If you were editing the native View for your list and need JSLink to work (for indicators or something), you are hosed. Start over.  "Why would anyone want to have indicators and customize the column widths?" Why have a JSlink field if its useless? 


    Rand Wrobel, Consultant

    Tuesday, November 3, 2015 12:22 AM
  • You can try using SharePoint List Booster - it allows to resize columns in the lists and document libraries, change font styles, colors, apply conditional formatting and many more - http://www.spbooster.com

    Paul Shkurikhin blog.sharepointalist.com


    Tuesday, January 12, 2016 5:57 AM
  • This is a shame that this is the soution that Microsoft suggests to use to simply change a column width.  I am trying to follow the instructions, but I don't see a "List View" ribbon when I move the cursor through the code.  I know both CSS and HTML and I can't find where I'm supposed to make the changes.   Now I have to look for another blog entry to find out why I can't see the List View options.  It takes too long to and too many steps to make minor changes. Microsoft, please fix Designer so that it does what it is supposed to do.  Since changing to the 2013 Designer, it is a real mess and difficult to do ANYTHING!  Frustrated!
    Thursday, January 28, 2016 7:59 PM
  • This can be done by using CSS.

    Regards,

    Jithendar

    Friday, January 29, 2016 1:22 AM
  • This worked great for me - sort of.  In SPD I was able to actually get the List View Tools Tab to display which let me edit the column width - but I would save it and it would display correctly in Designer but would not render the change in the Browser. 

    When I followed the directions you provided above - it worked great except I randomly get the following error when trying to view the list now in the browser:

    "Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.

    Correlation ID:7dcad31e-051a-4b01-895d-ab133f059c78".



    Monday, February 22, 2016 5:06 PM
  • Does this still work with SharePoint 2013/Designer 2013? I've gone through AllItems and can not get "List View Tools" to show up in the toolbar...
    Thursday, March 24, 2016 4:19 PM
  • This approach is not applicable to GRID-type list views, only HTML (standard)
    Wednesday, March 30, 2016 5:26 AM
  • When I try this, I do not at any point in the code get the List View Tools tab.  Only the Web Part Tools/Format tab shows up. What step am I missing here?
    • Proposed as answer by njoynt85 Wednesday, July 12, 2017 4:22 PM
    • Unproposed as answer by njoynt85 Wednesday, July 12, 2017 4:22 PM
    Friday, March 10, 2017 9:21 PM
  • San thanks this worked perfectly.  Just wondering if there is a similar way to make a Universal change meaning that the column width be adjust for all views existing and future?

    Regards,

    Gina

    Thursday, December 14, 2017 7:35 PM
  • Hi, I have also updated the style, but in designer tab I got an error and now , my list could not be displayed. SPDesigner 2010

    What is the problem?

    Unable to display this Web Part. To troubleshoot the problem,
    open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor
    such as Microsoft SharePoint Designer. If the problem persists, contact your Web
    server administrator.


    Correlation
    ID:c8790857-dbe0-4645-8d1d-941197734f07


    • Edited by TBaytler Monday, April 23, 2018 6:05 PM
    Monday, April 23, 2018 6:03 PM