Stump the Panel

Paul Grenier, Lead Moderator

Stump the Panel » Site Managers and Site Collection Managers

1. 

   jlschu1
   Member

   Is it possible to adjust size (width) of columns within a webpart?

   Posted 5 months ago #
2. 

   AutoSponge
   Administrator

   That probably depends on the web part. It also depends if you want the changes only on that page, over the entire site, over all web parts, etc.

   A few options: change element width in CSS, add width attributes in javascript, edit the web part's style xsl file, edit the web part directly.

   Can you provide more information about what you're trying to do?

   Posted 5 months ago #
3. 

   jlschu1
   Member

   The best way for me to show you what I am talking about regarding adjusting the column width is to send you an email with a screenshot. Can I email you? My email address is [email protected]. thank you

   Posted 5 months ago #
4. 

   AutoSponge
   Administrator

   My simple solution is to add the following script to the page:
   

   <script type="text/javascript">
   _spBodyOnLoadFunctionNames.push("fixTableWidth");
   function fixTableWidth() {
     var tags = document.getElementsByTagName("TABLE");
     for (var i=0; i < tags.length; i++) {
       if (tags[i].className == "ms-listviewtable"){
           tags[i].removeAttribute('width');
       }
     }
   }
   </script>

   This will "compress" the columns of the listview web part to minimum widths. A more sweeping change involves editing the server's global XML files to remove 'with="100%"'.

   Posted 4 months ago #
5. 

   cepes
   Member

   Hi Paul:
   I used your CSS (see below) in a CEWP to add word wrap to the column headers and got a much narrower column width adjustment result than using the code in this post. Perhaps "jlschu1" might like to use it as well.

   Charlie

   <style type="text/css">
   .ms-viewheadertr td, .ms-viewheadertr a {
   white-space:normal;
   white-space-collapse:collapse;
   text-wrap:normal;
   word-wrap:normal;
   text-align:center;
   }
   </style>

   Posted 1 month ago #
6. 

   jaxkookie
   Member

   This was very useful. I tried to take this one more step. I have 40 columns of data. all numerical fields, 5 digits max. Titles very long. I tried to apply the filter writing mode;, but I cant get the text the direction I need it. I want to turn the text 90 deg to the left, so it aligns to the right and bottom. I can only get it to aligh top and left. when I add flipv and fliph the text become silghtly distorted. here is my styles
   

   <style type="text/css">
   .ms-viewheadertr td, .ms-viewheadertr a {
   /*white-space:normal;
   white-space-collapse:collapse;
   text-wrap:normal;
   word-wrap:normal;
   text-align:left;*/
   writing-mode:tb-rl;
   /*filter: flipH() flipV();*/
   color:#000000;
   }
   </style>

   Posted 1 month ago #
7. 

   AutoSponge
   Administrator

   Drop the ():
   

   writing-mode: tb-rl;
   filter: flipv fliph;

   but it only works in IE7 because it's CSS3

   Posted 1 month ago #
8. 

   jaxkookie
   Member

   Got it, I finally found another resource that dropped the (). That also cleared up the text. Is there another way to rotate column labels? or even slant 45 deg, like excel?

   Posted 1 month ago #
9. 

   AutoSponge
   Administrator

   layout-flow: vertical-ideographic; will make the text rotate but 90-degrees clockwise (not as nice). The only way I know to get 45-degrees is with images.

   Posted 1 month ago #
10. 

    jaxkookie
    Member

    thanks again for all your help. That was more than I knew before.

    Posted 1 month ago #

RSS feed for this topic

Reply

You must log in to post.