function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mohamed AzarudeenMohamed Azarudeen 

pageblock table or datatable

pageblock table or datatable header column display in transform: rotate(-90deg); . If any body have a code please share..


-90degrees
Best Answer chosen by Mohamed Azarudeen
bob_buzzardbob_buzzard
The PDF generator is quite picky about the styles.  I've found that I need to specify inline styles to get them to work a lot of the time.  However, the rotation is all browser specific extensions, so you may not be able to do this using the PDF generator, as it is not a browser and won't have its own extensions.

All Answers

bob_buzzardbob_buzzard
This is CSS rather than a Visualforce capability.  Chris Coyler has an example of this at the excellent CSS Tricks site:

http://css-tricks.com/snippets/css/text-rotation/
Mohamed AzarudeenMohamed Azarudeen
Thanks BOB.. Following code I tried in my org. It is working fine. But when i try to generate a PDF.. CSS will not reflected in PDF. Please help me ..

<apex:page renderAs="pdf"   >
<html>
<head>


<!--[if IE]>
   <style>
      .rotate_text
      {
         writing-mode: tb-rl;
         filter: flipH() flipV();
      }
   </style>
<![endif]-->
<!--[if !IE]><!-->


     <style>
       .rotate_text
      {
         -moz-transform:rotate(-90deg);
         -moz-transform-origin: top left;
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: top left;
         -o-transform: rotate(-90deg);
         -o-transform-origin:  top left;
          position:relative;
        
      }
   </style>
<!--<![endif]-->
   <style> 
      table
      {
       
         table-layout: fixed;
         width: 69px; /*Table width must be set or it wont resize the cells*/
      }
      th, td
      {
          border: 1px solid black;
          width: 23px;
      }
      .rotated_cell
      {
         height:50px;
         vertical-align:bottom
      }
   </style>
  
</head>

<body>
   <table border='1'>
      <tr>
         <td class='rotated_cell'>
            <div class='rotate_text'>Test1</div>
         </td>
         <td class='rotated_cell'>
            <div class='rotate_text'>Test2</div>
         </td>
         <td class='rotated_cell'>
            <div class='rotate_text'>Test3</div>
         </td>
      </tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>X</td></tr>
   </table>
   </body>
  </html>
</apex:page>
bob_buzzardbob_buzzard
The PDF generator is quite picky about the styles.  I've found that I need to specify inline styles to get them to work a lot of the time.  However, the rotation is all browser specific extensions, so you may not be able to do this using the PDF generator, as it is not a browser and won't have its own extensions.
This was selected as the best answer
Mohamed AzarudeenMohamed Azarudeen
Thanks BOB.. If u know any other solutions.. please provide me
bob_buzzardbob_buzzard
I often use the Print to PDF functionality of google chrome to work around limitations in the PDF renderer - depends on your use case as to whether that is an option.