locked
adjust sharepoint list column width RRS feed

  • Question

  • hello

    in my SP list, the column is too short. Some of the text can't display.

    How can I adjust the column with to mark them show up?

    Wednesday, June 29, 2016 2:09 PM

Answers

  • Hi Zed

    You can ether use Sharepoint designer or you can use below solution provided in Link

    According to your description, you want to change the column’s width of a library in SharePoint 2013.

    In addition to the Ostefn’s suggestion, we can also use jquery to change the width of the column in SharePoint 2013:

          1. Create a txt file containing the code below:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $("TH.ms-vh2:contains('Title')").css("width", "300px"); //You can change the column to be the column you want to change the width, Title in the code for example.

    });

    </script>

           2. Upload the txt file to a library in SharePoint.

           3. Add a Content Editor in the page where the library that you want to change the width of the column exists, and then edit the web part.

           4. In Content Link, type in the URL of the txt file in SharePoint, like http://server/site/library/file.txt.

    • Proposed as answer by croute1 Thursday, June 30, 2016 5:49 PM
    • Marked as answer by dklcv Friday, July 1, 2016 1:00 AM
    Wednesday, June 29, 2016 2:14 PM
  • Hi Zed,

    According to your description, you want to adjust the column width.

    As Rashu said, you can use CSS to achieve it.

    1. Navigate to the list you want to edit.

    2. Press F12 to find the element of the column.

    3. Copy the Class name.

    4.Insert a script web part to the page.

    5. Insert the code to the web part.

    <style>

    .(Classname){

    width:100px;

    }

    </style>

    Best Regards,

    CY


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

    • Marked as answer by dklcv Friday, July 1, 2016 1:00 AM
    Thursday, June 30, 2016 2:05 AM

All replies

  • Hi Zed

    You can ether use Sharepoint designer or you can use below solution provided in Link

    According to your description, you want to change the column’s width of a library in SharePoint 2013.

    In addition to the Ostefn’s suggestion, we can also use jquery to change the width of the column in SharePoint 2013:

          1. Create a txt file containing the code below:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $("TH.ms-vh2:contains('Title')").css("width", "300px"); //You can change the column to be the column you want to change the width, Title in the code for example.

    });

    </script>

           2. Upload the txt file to a library in SharePoint.

           3. Add a Content Editor in the page where the library that you want to change the width of the column exists, and then edit the web part.

           4. In Content Link, type in the URL of the txt file in SharePoint, like http://server/site/library/file.txt.

    • Proposed as answer by croute1 Thursday, June 30, 2016 5:49 PM
    • Marked as answer by dklcv Friday, July 1, 2016 1:00 AM
    Wednesday, June 29, 2016 2:14 PM
  • Hi,

    Add a content editor webpart to your page.

    using F12, find the required CSS element, then using <style> </style> increase the width in the way you want.

    This will help you out.



    Thanks, Rahul Rashu

    Wednesday, June 29, 2016 2:24 PM
  • Hi Zed,

    According to your description, you want to adjust the column width.

    As Rashu said, you can use CSS to achieve it.

    1. Navigate to the list you want to edit.

    2. Press F12 to find the element of the column.

    3. Copy the Class name.

    4.Insert a script web part to the page.

    5. Insert the code to the web part.

    <style>

    .(Classname){

    width:100px;

    }

    </style>

    Best Regards,

    CY


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

    • Marked as answer by dklcv Friday, July 1, 2016 1:00 AM
    Thursday, June 30, 2016 2:05 AM