I want to change the dropdown arrows in AHTML reports to something that looks nicer, like an icon. I'm not sure why it's not already just a simple PNG image, but it's this messy table built row at a time to look like an arrow, and has a solid background that looks bad if the title background is anything but the same color.

I'm about to dig into creating an arrow with custom CSS, but before I do that I wanted to make sure I wasn't missing some obvious way to make a nicer, smaller, transparent-backround arrow.

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

So my major gripe is still that AHTML styling with CSS is very flaky at best, part of which is due to the fact that the page element that are affected by a WebFOCUS stylesheet are not the same elements that get styled if that report component is given a CSS class.
In other words,

TYPE=TITLE,
 BACKCOLOR=RGB(#FF0000),

is not the same as

 
WF Stylesheet
***************** 
TYPE=TITLE,
 CLASS='columntitle',

CSS Stylesheet
****************
.columntitle {background-color:#FF0000;}

So far I have managed to finagle it so that I can set display to none for the ugly arrow table and replace it with a nifty border trick here:
http://jonrohan.me/guide/css/c...ng-triangles-in-css/

If anyone's interested, here's the CSS to do it. You'll notice there's many !important declarations. This is because the report is generated with inline styles (also crazy IMO) that will nullify your CSS styles.

/*Set the borders for the dropdown arrow div*/
div.m1i0 {
 padding:5px 2px 0 2px !important;
 text-align:center;
 background-color:#eeeeee !important;
 border-left: 1px solid #bbb !important;
 border-bottom: 1px solid #bbb !important;
 border-top: 1px solid #f9f9f9 !important;
 border-right: 1px solid #f9f9f9 !important;
 width:12px !important;
}
/* The div inside the one above is where we create our CSS arrow */
div.m1i0 div {
	height:0 !important;
	width:0 !important;
	border-width: 6px !important;
	border-color: #009933 #eee #eee #eee !important;
	border-style:solid !important;

}

/* Now hide the entire table that is the default arrow */
.m1i0 div table{display:none; background-image:none;} 

I've now moved on to trying to get different borders for the column titles and for the data cells. The below works in Firefox, and is apparently targeting the right element in IE, but the borders aren't actually showing up. Note that this would be a non-issue if the class was just applied correctly from the WF stylesheet. I have a Tech Support ticket open on this now.

/*add borders to each data cell where the ID attributed starts with 'I0r'. 
This should work in IE7+, but some default styles are still being applied somehow*/
td[id^="I0r"] {
	border-width: 1px !important;
	border-style: dotted !important;
	border-color: #000 !important;
} 

quote:

If anyone's interested, here's the CSS to do it.

Thank you for the CSS code.

I've applied it to a test AHTML report I have and it ran A-OK.

I see that the AHTML column heading 'drop down arrow' now looks more like a button (which is appropriate for something that is 'clickable').

I also see that the arrow itself could be set to a color matching a sites color scheme, dark green in your test case.

Very interesting technique.

Quick question: Is 'm1i0' how WebFOCUS designates this component of the AHTML report? I ask, b/c I didn't see 'm1i0' within a view source of the report.

Thanks again,
Dave

Yes, one of my objectives to start was just to get rid of the hardcoded gray background behind the arrow, without which you had a non-centered rectangle in the field, which looked really bad if your header was a different color. And the borders applied to the outside div are lighter on the top and right and darker in the bottom and left, giving a raised button illusion.

As to your question about the 'm1i0' class, that's just what I saw when using IE's developer tools (normally I'd use Firebug in Firefox) and ran with that. But then I found that that class is also used for the popup menu box, so I had to mess with the CSS to not select that element as well and fill it up with arrows.

Thanks very much for this!

By the way, I found that adding a border-collapse attribute makes the borders look nicer:

table {
border-collapse: collapse;
}

I'd love to be able to change the "highlight" color, currently #33ffcc. But it appears to be made difficult by the fact that the TR and the enclosed TD's are styled on the fly with background-color: #33ffcc;

quote:

As to your question about the 'm1i0' class, that's just what I saw when using IE's developer tools

Ah, I see the classname now, via IE's Developer Tools.

Thanks again.

@Francis, looks like the hover color is something that can be set in the Painter (in the format tab), but the WF style code is:

 TYPE=REPORT,
     OBJECT=CURRENT-ROW,
     HOVER-BACKCOLOR=RGB(153 204 0),
$ 

I just found out how to FINALLY get borders around my data cells. I found it wasn't being applied because due to how WebFOCUS creates the AHTML page in some nonstandard way with no charset, the document mode gets flipped to quirks, which is horrible and meant it wouldn't pay attention to attribute selectors (available since IE7). So in any case, this is a little javascript expression hack you can put in the CSS that targets my data cells.

 td {
	_border: expression(this.id.substring(0,3)=="I0r" ? '1px dotted #ccc' : '');
} 

This one works for Firefox (even though it loads in quirks mode too) and if I ever figure out how to get it out of quirks mode in IE:

 td[id^="I0r"] {
	border-width: 1px !important;
	border-style: dotted !important;
	border-color: #ccc !important;
} 

This message has been edited. Last edited by: J.Hines,

Interestingly, I have no problems getting borders. We have this in our WF stylesheet (used for HTML, EXL2K and AHTML):

TYPE=REPORT,
UNITS=PTS,
BORDER-TOP=0.5,
BORDER-BOTTOM=0.5,
BORDER-LEFT=0.5,
BORDER-RIGHT=0.5,
BORDER-TOP-COLOR=RGB(169 169 169),
BORDER-BOTTOM-COLOR=RGB(169 169 169),
BORDER-LEFT-COLOR=RGB(169 169 169),
BORDER-RIGHT-COLOR=RGB(169 169 169),
FONT='CALIBRI',
SIZE=10,
$

I added the border-collapse property to eliminate the ugly html border.

Hover and highlight colours are set via these WF style-sheet properties (ugly colours for emphasis only):

TYPE=REPORT,
     OBJECT=CURRENT-ROW,
     HOVER-BACKCOLOR=RED,
     BACKCOLOR='FUCHSIA',
$

quote:

Originally posted by Francis Mariani:
Interestingly, I have no problems getting borders. We have this in our WF stylesheet (used for HTML, EXL2K and AHTML):

Ah, you're right, however you can't change the color. You can collapse the borders, but even if I make the borders all red, I still get gray showing. Also what I didn't like about that was that I have two HEADING lines, and this method puts borders between them, which I don't want, and can't assign classes to those cells to turn off borders for that.

I really want to be able to apply borders in an AHTML report in whatever section I want through a WF or CSS stylesheet, but you can only either turn grid on, which is a default color, or off and try to figure out how to apply CSS borders (as I have).

This message has been edited. Last edited by: J.Hines,

Yes, it does add borders around heading lines, but only for AHTML!

I'm not sure it's helpful or whether it would even work for AHTML, but does it help to set the table property HTMLCSS to OFF?
With HTML-output at least, that stops WF from generating CSS-rules in the document, while it still applies the CLASS attributes where you told it to. In my experience, that gives you better control over report styling.

I'd also be slightly worried that the HTML id for the arrow you're trying to make disappear is some generated string that could just as well turn into something entirely different than "m1i0". If that's the case, I'm not sure what could be done about it.

Ideally, the HTML that ibi generates would contain appropriate identifiers that you could apply your style to, but alas, that's not the case.

Thanks Wep, I'll try turning HTMLCSS off.

EDIT: I just tried, and it makes no difference where the class is applied whether the setting is on or off.

You're right; ideally there would be classes assigned to all logical elements (like data cells) and IDs where appropriate (headers, etc) so that you would have easy hooks for CSS.

Maybe, hopefully, that will be remedied in WF 8?

This message has been edited. Last edited by: J.Hines,

quote:

td[id^="I0r"] {
border-width: 1px !important;
border-style: dotted !important;
border-color: #ccc !important;
}

This works fine for me running on windows 7 from 7.7.03 and IE8 - which doesn't load in quirks mode?

T

quote:

Originally posted by Tony A:
This works fine for me running on windows 7 from 7.7.03 and IE8 - which doesn't load in quirks mode?

Well, that's interesting. What mode does yours say it's operating in?

I might have to open a case to see why I'm getting Quirks mode.

This message has been edited. Last edited by: J.Hines,