Focal Point
[SOLVED]VALIGN=BOTTOM for Across Value

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/2197087336

September 27, 2013, 02:07 PM
Anatess
[SOLVED]VALIGN=BOTTOM for Across Value
Hi guys,

I'm getting old. Another simple question that I'm almost embarassed to ask. Is there a VALIGN attribute in a Webfocus style?

I have a simple problem that I don't want to have to create an external stylesheet for. It came about as I was trying to implement a rotated Across Value.

So, here's the problem simplified:

This fex:
DEFINE FILE CAR
VERT/A1000='<DIV STYLE="' ||
'layout-flow : vertical-ideographic;' ||
'writing-mode: tb-rl;' ||
'filter: flipH() flipV();' ||
'font-family: ''Trebuchet MS'';' ||
'font-size: 10pt;' ||
'font-weight:bold;' ||
'letter-spacing:2px;' ||
'text-align: left;' ||
'position: relative;' ||
'border:light;' ||
'border-style: ridge;' ||
'border-color: 333399;' ||
'background-color: 93ACDB;' ||
'color:white;">' || COUNTRY || '</DIV>';
END
TABLE FILE CAR
SUM DEALER_COST
BY CAR
ACROSS VERT
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET STYLE *
TYPE=ACROSSVALUE,
     BACKCOLOR='YELLOW',
$
ENDSTYLE
END


Produces this html:
<HTML>
<HEAD>
<META name="HandheldFriendly" content="True">
<META name="PalmComputingPlatform" content="True">
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING=1>
<TR>
<TD COLSPAN=6>
<TABLE CELLPADDING=0 WIDTH="100%"><TR>
<TD>
PAGE     1</TD></TR></TABLE></TD>
</TR>
<TR>
<TD></TD><TD COLSPAN=5>
VERT</TD>
</TR>
<TR>
<TD>
</TD>
<TD BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">ENGLAND</DIV></TD>
<TD BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">FRANCE</DIV></TD>
<TD BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">ITALY</DIV></TD>
<TD BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">JAPAN</DIV></TD>
<TD BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">W GERMANY</DIV></TD>
</TR>
<TR>
<TD VALIGN=BOTTOM>
CAR</TD>
</TR>
<TR>
<TD>
ALFA ROMEO</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
16,235</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
AUDI</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
5,063</TD>
</TR>
<TR>
<TD>
BMW</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
49,500</TD>
</TR>
<TR>
<TD>
DATSUN</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
2,626</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
JAGUAR</TD>
<TD ALIGN=RIGHT>
18,621</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
JENSEN</TD>
<TD ALIGN=RIGHT>
14,940</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
MASERATI</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
25,000</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
PEUGEOT</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
4,631</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
TOYOTA</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
2,886</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
<TR>
<TD>
TRIUMPH</TD>
<TD ALIGN=RIGHT>
4,292</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
<TD ALIGN=RIGHT>
.</TD>
</TR>
</TABLE>
</BODY>
</HTML>


All I want is to add VALIGN=BOTTOM onto the Across Values like this:
<TR>
<TD>
</TD>
<TD VALIGN=BOTTOM BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">ENGLAND</DIV></TD>
<TD VALIGN=BOTTOM BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">FRANCE</DIV></TD>
<TD VALIGN=BOTTOM BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">ITALY</DIV></TD>
<TD VALIGN=BOTTOM BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">JAPAN</DIV></TD>
<TD VALIGN=BOTTOM BGCOLOR="#FFFF00">
<DIV STYLE="layout-flow : vertical-ideographic;writing-mode: tb-rl;filter: flipH() flipV();font-family: 'Trebuchet MS';font-size: 10pt;font-weight:bold;letter-spacing:2px;text-align: left;position: relative;border:light;border-style: ridge;border-color: 333399;background-color: 93ACDB;color:white;">W GERMANY</DIV></TD>
</TR>


In the simplest way possible.

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


WF 8.1.05 Windows
September 30, 2013, 09:50 AM
Francis Mariani
Adding CSS vertical-align: bottom didn't work, try making all the divs the same height:

DEFINE FILE CAR
VERT/A1000='<DIV STYLE="' ||
'layout-flow : vertical-ideographic;' ||
'writing-mode: tb-rl;' ||
'filter: flipH() flipV();' ||
'font-family: ''Trebuchet MS'';' ||
'font-size: 10pt;' ||
'font-weight:bold;' ||
'letter-spacing:2px;' ||
'text-align: left;' ||
'position: relative;' ||
'border:light;' ||
'border-style: ridge;' ||
'border-color: 333399;' ||
'background-color: 93ACDB;' ||
'color:white;' ||
'height: 100px;">' || 
COUNTRY || '</DIV>';
END
TABLE FILE CAR
SUM DEALER_COST
BY CAR
ACROSS VERT
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET STYLE *
TYPE=ACROSSVALUE,
     BACKCOLOR='YELLOW',
$
ENDSTYLE
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
September 30, 2013, 09:55 AM
Francis Mariani
Or slip some CSS for the TDs into the the code, a bit repetitive but it works.

DEFINE FILE CAR
VERT/A1000='<DIV STYLE="' ||
'layout-flow : vertical-ideographic;' ||
'writing-mode: tb-rl;' ||
'filter: flipH() flipV();' ||
'font-family: ''Trebuchet MS'';' ||
'font-size: 10pt;' ||
'font-weight:bold;' ||
'letter-spacing:2px;' ||
'text-align: left;' ||
'position: relative;' ||
'border:light;' ||
'border-style: ridge;' ||
'border-color: 333399;' ||
'background-color: 93ACDB;' ||
'color:white;' ||
'/*height: 100px;*/">' ||
'<style> td { vertical-align: bottom; }</style>' ||

COUNTRY || '</DIV>';
END
TABLE FILE CAR
SUM DEALER_COST
BY CAR
ACROSS VERT
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET STYLE *
TYPE=ACROSSVALUE,
     BACKCOLOR='YELLOW',
$
ENDSTYLE
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
September 30, 2013, 10:22 AM
Francis Mariani
Or, simply 
DEFINE FILE CAR
VERT/A1000='<DIV STYLE="' ||
'layout-flow : vertical-ideographic;' ||
'writing-mode: tb-rl;' ||
'filter: flipH() flipV();' ||
'font-family: ''Trebuchet MS'';' ||
'font-size: 10pt;' ||
'font-weight:bold;' ||
'letter-spacing:2px;' ||
'text-align: left;' ||
'position: relative;' ||
'border:light;' ||
'border-style: ridge;' ||
'border-color: 333399;' ||
'background-color: 93ACDB;' ||
'color:white;">' || COUNTRY || '</DIV>';
END
TABLE FILE CAR
SUM DEALER_COST
BY CAR
ACROSS VERT
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET STYLE *
TYPE=ACROSSVALUE,
     BACKCOLOR='YELLOW',
$
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<style> td { vertical-align: bottom; }</style>
-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
September 30, 2013, 11:32 AM
Anatess
Francis, THANK YOU very much. I ended up doing the height option which worked perfectly.

I couldn't use the full TD override because it overrides the entire table and not just the across values so I had to do it at the DEFINE.

Just out of curiousity, can you do a TD override just for the Across Values (without inserting it in the DIV)? Maybe with some labeling or something?


WF 8.1.05 Windows
September 30, 2013, 12:28 PM
Francis Mariani
You can apply a CLASS to the Across Values. This only works with format HTMTABLE:

DEFINE FILE CAR
VERT/A1000='<DIV STYLE="' ||
'layout-flow : vertical-ideographic;' ||
'writing-mode: tb-rl;' ||
'filter: flipH() flipV();' ||
'font-family: ''Trebuchet MS'';' ||
'font-size: 10pt;' ||
'font-weight:bold;' ||
'letter-spacing:2px;' ||
'text-align: left;' ||
'position: relative;' ||
'border:light;' ||
'border-style: ridge;' ||
'border-color: 333399;' ||
'background-color: 93ACDB;' ||
'color:white;">' || COUNTRY || '</DIV>';
END
TABLE FILE CAR
SUM DEALER_COST
BY CAR
ACROSS VERT
ON TABLE HOLD FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=ACROSSVALUE,
     CLASS='CSSACC',
$
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<style> .CSSACC { vertical-align: bottom; background-color: yellow; }</style>

!IBI.FIL.HOLD;
-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
September 30, 2013, 01:32 PM
Anatess
THANKS, FRANCIS!

You're the man.


WF 8.1.05 Windows