SharePoint 2010, how to change column width in list view

Question

I have a list that involves an item description of a few sentences. This makes each item take up a lot of vertical space on the page when someone views the list in a browser. I can't figure out how to edit the column width so it is more sensibly sized to hold a small paragraph. I tried going into the SP designer, to the list, to the view, to design mode, changing the width manually by clicking and dragging, and saving. However, it doesn't update the list when I go to the page and view it in a browser. How can I make this work? Thanks!

Danny '365CSI' Engelman · Answer

Work this CSS into your page:

/* ListView - make Description fields a maximum width and height, and show full text on mouseover*/
/*.ms-itmhover is the TR row*/
.ms-vb2  .ms-rtestate-field{
    max-width:40em;
    max-height:2em;
    overflow:hidden;
}
.ms-vb2  .ms-rtestate-field:hover{
    max-height:none;
    background-color:whitesmoke;
}

Erin L · Answer

You can add a content editor web part to your view page with a content link to a css file containing:

<style>
td.ms-vb2 div[dir='']{
    width:400px;
}
</style>

This will only work if you only have one field on the page that's multiple lines of text (or if you have multiples but you're fine with all of them being the same width).

SharePoint 2010, how to change column width in list view

2 Answers

Add your own answers!

Ask a Question