Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to fix column widths (for headers) in Sharepoint WSS 3.0

Posted on 2010-09-08
14
1,627 Views
Last Modified: 2012-05-10
Hi

We are using WSS 3.0 and have access to sharepoint designer.

I want to set the column header (and column) width for certain list views to a fixed width. This is because some of our column headers have long titles and we want all the columns the same width.

This is my first time doing this, not sure whether I should be using a css style and applying this to certain pages or just adjusting the column width manually / in the code.

I have googled this and tried the following:

1.      Go into sharepoint designer (spd) and go into excel data view, then manually edit the column width (select column, drag width)
This had no effect so I tried…
2.      Repeat step 2 but remove Nowrap=’Nowrap’  in code as descibed here:  http://aanuwizard.wordpress.com/2010/08/01/sharepoint-2010-how-to-change-width-of-list-column/
Didn’t work either
3.      I tried playing about with css styles by copying our core.css to a new style and playing about with this. What CSS properties should I be looking at? And how do I apply the style to a whole page/view.


Any help would be great, thanks gents
0
Comment
Question by:happyhappyjoyjoy
  • 8
  • 6
14 Comments
 
LVL 21

Expert Comment

by:chapmanjw
ID: 33627410
Try adding this CSS to your page:

.ms-vh2, .ms-vb2, .ms-vb-icon, .ms-vb-title, .ms-vb-user
{
      width: 50px !important;
}

If I missed any of the CSS classes for the table columns, use the IE Developer Toolbar to help you identify them.
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33627619
Thanks

That has amended all the data in the sheet but not the column headings. Appreciate the help though!

Attached is example.

The top screencap is before, the second is after. It's just dummy data so I can work out the theory of doing this first.

thanks
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33627629
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 21

Expert Comment

by:chapmanjw
ID: 33628052
Ok, the issue is the NoWrap attribute on the table cells.  Here is one way to over come it with CSS and JQuery combined:



<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
      $('.ms-vh2').removeAttr('noWrap');
      $('.ms-vb').removeAttr('noWrap');
      $('.ms-vb2').removeAttr('noWrap');
      $('.ms-vb-icon').removeAttr('noWrap');
      $('.ms-vb-title').removeAttr('noWrap');
      $('.ms-vb-user').removeAttr('noWrap');
});

</script>
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33628578
thanks for that. seemed to accept the code ok and now i get better results when i try to change the column width by dragging. The problem is that the column headers still aren't getting smaller when i make the width smaller. I can make the column headers MORE wide however

the 5 column has been made wider in this image: http://tinypic.com/r/2njlpqe/7

i.e. i want 1234567 89101112 to look like:

1234567
89101112

Is there any more info I should provide or settings I should check? I put the code you posted in the CSS style sheet attached as a link to that page (a view) . Should I be clicking on some of the styles in the bottom right and applying them?

SPD screenshot: http://i55.tinypic.com/ok7a0w.png

apologies for any naievety, i have no development team to ask. I'm just a cable monkey!
0
 
LVL 21

Expert Comment

by:chapmanjw
ID: 33628670
You will also need to set a fixed with of the web part (in the Modify Shared Web Part settings).  For instance, with a 5 column table that you want to have each column at 100px, set the width of the web part to 500px.
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33628972
thanks

did that, from the webpart on the page itself and here are the results, column headers un-changed

http://i53.tinypic.com/kf5pog.png

thanks
0
 
LVL 21

Expert Comment

by:chapmanjw
ID: 33629164
If you use the IE Developer Toolbar and select one of the headers with it, does it still have the NoWrap tag?
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33644373
hi

The nowrap attribute still shows in IE developer toolbar (see attached).

http://i56.tinypic.com/1zwjak5.png

I will have a play about now with a few pages with as blank a CSS as I can, trying to remove all the nowrap tags, see if i can just start again



thanks again
0
 
LVL 21

Accepted Solution

by:
chapmanjw earned 500 total points
ID: 33647467
On a previous solution, I had suggested to the user to use JQuery to remove the nowrap element. Here is that response:

Ok, the issue is the NoWrap attribute on the table cells.  Here is one way to over come it with CSS and JQuery combined:



<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
      $('.ms-vh2').removeAttr('noWrap');
      $('.ms-vb').removeAttr('noWrap');
      $('.ms-vb2').removeAttr('noWrap');
      $('.ms-vb-icon').removeAttr('noWrap');
      $('.ms-vb-title').removeAttr('noWrap');
      $('.ms-vb-user').removeAttr('noWrap');
});

</script>
0
 
LVL 21

Expert Comment

by:chapmanjw
ID: 33647482
Well that went to the wrong post lol.
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33660585
still doesn't work but thanks for trying
0
 

Author Comment

by:happyhappyjoyjoy
ID: 33670490
i managed to find some success by messing about with CSS. While your code didnt work, all the tips in here helped me solve the issue. Thanks
0
 

Author Closing Comment

by:happyhappyjoyjoy
ID: 33670492
thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 6 57
Sharepoint 2013 error 4 56
Error while setting up the Server Farm Account 8 42
SharePoint 2013 Document Library Newsletter View Count 3 66
Microsoft SharePoint Foundation 2010 and Microsoft SharePoint Server 2010 do not offer the option to configure the location of the SharePoint diagnostic trace log files during installation.  This can, however, be configured through Central Administr…
Summary In SharePoint 2010 it is easy to create custom color themes to jazz up a site. Theme colors can also be created in PowerPoint 2010 with a few clicks. But how do the chosen colors actually look in the SharePoint site? The attached PowerPoint…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question