Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (CLOSED) Vertical Column Titles (ALL browsers)

Read-Only Read-Only Topic
Go
Search
Notify
Tools
(CLOSED) Vertical Column Titles (ALL browsers)
 Login/Join
 
Platinum Member
posted
Hi,
I've search Focal Point and the web, for that matter. I need to rotate column titles to appear verically (at a 90 degree angle) in HTML. It must work with ALL browsers (IE 8, IE 9 (etc) , Chrome, Safari, and Firefox).
So 'mso-rotate:90;' will not work because that works in ONLY IE.

Can anyone help? I can get it to rotate in IE9 by applying the css class to all titles.

Thanks!
Marilyn

This message has been edited. Last edited by: mpbMDE,


WebFOCUS 8.1.05 Windows 7, all output
 
Posts: 107 | Registered: February 18, 2011Report This Post
Expert
posted Hide Post
This is a beginning, tested on IE9, Firefox 23, Safari 5.1 and Google Chrome 29. Rotating the text (actually rotating the td that contains the text) is not pretty. There's extra styling here to try to make things look nice (to my eye). The main problem is that to get the rotation to work properly, the td needs to be square...

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES
BY COUNTRY
BY CAR
BY MODEL

ON TABLE HOLD AS H001 FORMAT HTMTABLE

ON TABLE SET STYLE *
TYPE=REPORT, BORDER=OFF, SQUEEZE=ON, $

TYPE=TITLE, CLASS=columnTitle, $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<!doctype html>

  <head>
    <title>WebFOCUS Report</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style type="text/css">

    body { font-family: Arial, sans-serif; font-size: 9pt; }

    table { border: 2px solid #dedede; }
    td { background-color: #dedede; border: 0; }

    //table { border-collapse: collapse; }

    .columnTitle {
      background-color: #aaaaaa;
      color: white;
      height: 170px;
      width: 170px;
      text-align: left;
      vertical-align: bottom;

      /* for firefox, safari, chrome, etc. */
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);

      /* for ie */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
    </style>
  </head>

  <body>
!IBI.FIL.H001;
  </body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: Francis Mariani,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post

MS IE


Google Chrome


Apple Safari


Mozilla Firefox


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
Thank you Francis! The column titles in the report need to be vertical to minimize their width; [ values are 7 digits wide and the column names are lengthy] so the required square title boxes will not work.


WebFOCUS 8.1.05 Windows 7, all output
 
Posts: 107 | Registered: February 18, 2011Report This Post
Expert
posted Hide Post
Try playing with the css a bit, but unfortunately, it seems like if you have different height and width things get ugly. Give it a try...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
You could do it the old-fashioned, FOCUS way:

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES/D7  AS 'V,E,R,Y,,L,O,N,G,,S,A,L,E,S'
WEIGHT/D7 AS 'V,E,R,Y,,L,O,N,G,,W,E,I,G,H,T'
HEIGHT/D7 AS 'V,E,R,Y,,L,O,N,G,,H,E,I,G,H,T'
LENGTH/D7 AS 'V,E,R,Y,,L,O,N,G,,L,E,N,G,T,H'

BY COUNTRY AS 'C,O,U,N,T,R,Y'

ON TABLE SET STYLE *
TYPE=REPORT, BORDER=OFF, SQUEEZE=ON, $
ENDSTYLE
END
-RUN
There's a limit of how many lines a column title can be (lines delimited by commas) - the documentation states "5 lines", but I managed the above 16 lines...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
Another roadblock: My titles are up to 35 characters long. Rats!


WebFOCUS 8.1.05 Windows 7, all output
 
Posts: 107 | Registered: February 18, 2011Report This Post
Expert
posted Hide Post
Found an article on the WWW: StackOverflow: Rotate Text as Headers in a table (cross browser) [closed]

Adapted for WebFOCUS:

SET PAGE=NOPAGE
SET BYDISPLAY=ON

TABLE FILE CAR
SUM
SALES/D7  AS ''
WEIGHT/D7 AS ''
HEIGHT/D7 AS ''
LENGTH/D7 AS ''

BY COUNTRY AS ''

ON TABLE HOLD AS H001 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!doctype html>

  <head>
    <title>WebFOCUS Report</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <style type="text/css">
      .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;
         top:20px;
      }
    </style>
<!--<![endif]-->

    <style type="text/css">
      body { font-family: Arial, sans-serif; font-size: 9pt; }

      table
      {
         border: 1px solid black;
         table-layout: fixed;
         width: 350px; /*Table width must be set or it won't resize the cells */
      }
      th, td
      {
          border: 1px solid black;
          width: 23px;
      }
      .rotated_cell
      {
         height:300px;
         vertical-align:bottom
      }
    </style>

</head>

  <body>
   <table border='1'>
      <thead>
        <tr>
           <td class='rotated_cell'>
              <div class='rotate_text'>Country</div>
           </td>
           <td class='rotated_cell'>
              <span class='rotate_text'>Sales&|nbsp;aaaa&|nbsp;bb&|nbsp;ccccc&|nbsp;ddd&|nbsp;eee&|nbsp;fffffff</span>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Weight&|nbsp;aa&|nbsp;bbbb&|nbsp;ccccccc&|nbsp;ddddd&|nbsp;eee&|nbsp;ff</div>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Height&|nbsp;aaa&|nbsp;bb&|nbsp;cccc&|nbsp;dddddddd&|nbsp;eee&|nbsp;fff</div>
           </td>
           <td class='rotated_cell'>
              <div class='rotate_text'>Length&|nbsp;aaaaaaa&|nbsp;bbbbbbb&|nbsp;cc&|nbsp;ddd&|nbsp;ee&|nbsp;ff</div>
           </td>
        </tr>
      </thead>

      <tbody>
!IBI.FIL.H001;
      </tbody>
   </table>
  </body>
</html>
-HTMLFORM END



Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
Silly me! One tried and tested method for HTML is to use images. This has been mentioned on FocalPoint. I would generate the report without the fancy styling. Then capture a screenshot and create images from crops of each column title, rotating the image 90°. Save them to a folder on the web server. Then modify the WebFOCUS code to something like this:

SUM
WEIGHT AS '<img src="/approot/baseapp/ctitle_weight.png />'
If you can't get this to work, I can try creating sample code for you.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Platinum Member
posted Hide Post
I am back working on these reports and continue to have an issue....

I have tried solutions above and a few more that I found on Focal Point [Thank you, Francis! I found some things I have used on other project, in the meantime.]

My findings:
HTMLTABLE works in some browsers.
And now the requirement is to produce the report(s) in Exzcel. HTMTABLE will convert to an excel table in Firefox and IE - but not in Chrome and I haven't turned it over to QA for a Safari test.

 
table file blah
blah blah blah
ON TABLE pchold/hold AS RPT9 FORMAT HTMTABLE
ON TABLE SET STYLE *
blah blah blah
ENDSTYLE
END
-RUN
SET HTMLFORMTYPE=XLS
-RUN
-HTMLFORM BEGIN
<STYLE>
.rotate
{
mso-rotate:90;
font-weight: bold;
vertical-align:bottom;
height:175;
border-style:solid;
}
</STYLE>
<BODY>
!IBI.FIL.RPT9;
</BODY>
-HTMLFORM END


Thanks in advance for any wisdom shared!
Marilyn


WebFOCUS 8.1.05 Windows 7, all output
 
Posts: 107 | Registered: February 18, 2011Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (CLOSED) Vertical Column Titles (ALL browsers)

Copyright © 1996-2020 Information Builders