APEX-AT-WORK no image

Set up column width in an APEX report (for Firefox)

Von Tobias Arnhold 2.13.2009
Most of you would say: "Why is that so special? Just go to
Report Attributes>Column Attributes>Column Formatting>CSS Style and add for example: width:100px"

Like the help says:
"Use this attribute to apply a style to a column value. For example, setting this attribute to 'color:#FF0000;' will result in the following html being generated:
<span style="color:#FF0000">Sample Data</span>
This will change the text color of the column to red."

You all are right but there is a problem with Firefox which is ignoring this setting.
Why? Take a look here:
http://www.velocityreviews.com/forums/t163666-firefox-ignores-the-style-width-attribute-in-the-span-tag.html

How to fix that now? I use the div tag in my sql statement for the report:

SELECT '<b><div style="width: 150px; text-align: left">Employee no.: ' || "EMP"."EMPNO" ||
'</div></b>' as "EMPNO",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EMP"."ENAME" || '</div>' as "ENAME",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EMP"."HIREDATE" || '</div>' as "HIREDATE",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EMP"."SAL" || '</div>' as "SAL",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EMP"."COMM" || '</div>' as "COMM"
FROM "EMP"
-- </div> - div tag is needed to create the css style attributes
-- "width: 150px;" - for column width
-- "text-align: left" - for text alignment
-- "background-color: rgb(225, 225, 225)" - for column background color
-- "border: 1px solid rgb(204, 204, 204)" - for border color
-- "padding: 2px" - for empty place between text and border


Example application in action: http://apex.oracle.com/pls/otn/f?p=25472:30

Forum entry to it: http://forums.oracle.com/forums/thread.jspa?forumID=137&threadID=854151

Honestly I think there is another way to fix this issue which I don't know yet but I would really appreciate to get to know about it. :D

To all: Enjoy the weekend, have fun and DON'T think about the world economic crisis. :)

6 Comments " Set up column width in an APEX report (for Firefox) "

Dimitri Gielis 14 February, 2009 00:23

Hi Tobias,

You could use a custom report layout (template in shared components).

It's better to avoid to put markup in your sql statements.

Dimitri

Tobias Arnhold 15 February, 2009 10:10

Hi Dimitri,

Thanks for the tip. I will try that out in the next couple of days.

Best regards,


Tobias

Fausto

Ive been trying to use your tip for managing the column size for the following query:

select "EAG_AREA"."A_NAME" as "AREA",
"EAG_OPPS"."O_GEN_DESC" as "DESCRIPTION",
rtrim("EAG_OPPS"."O_STATUS") as "STATUS",
"EAG_AM"."AM_NAME" as "ACCT MANG",
"EAG_CLIENT"."CL_NAME" as "CLIENT",
"EAG_OPPS"."O_NEXT_STP" as "O_NEXT STEPS",
"EAG_COUNTRY"."C_NAME" as "COUNTRY"
from "EAG_COUNTRY" "EAG_COUNTRY",
"EAG_CLIENT" "EAG_CLIENT",
"EAG_AREA" "EAG_AREA",
"EAG_AM" "EAG_AM",
"EAG_OPPS" "EAG_OPPS"
where "EAG_OPPS"."O_A_ID"="EAG_AREA"."A_ID"
and "EAG_AM"."AM_ID"(+)="EAG_OPPS"."O_AM_ID"
and "EAG_OPPS"."O_A_CL_ID"="EAG_CLIENT"."CL_ID"
and "EAG_COUNTRY"."C_ID"="EAG_CLIENT"."CL_CNTRY_ID"

Still not able to do so, the only thing i want is to define columns widths. I keep receiving this error> failed to parse SQL query:

Hope you can help me...

Tobias Arnhold 04 June, 2009 08:25

Start with the following select, to test if it works at all

select
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_AREA"."A_NAME" || '</div>' as "AREA",
from "EAG_AREA" "EAG_AREA";

If it works try the whole statement

select
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_AREA"."A_NAME" || '</div>' as "AREA",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_OPPS"."O_GEN_DESC" || '</div>' as "DESCRIPTION",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
rtrim("EAG_OPPS"."O_STATUS") || '</div>' as "STATUS",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_AM"."AM_NAME" || '</div>' as "ACCT MANG",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_CLIENT"."CL_NAME" || '</div>' as "CLIENT",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_OPPS"."O_NEXT_STP" || '</div>' as "O_NEXT STEPS",
'<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
"EAG_COUNTRY"."C_NAME" || '</div>' as "COUNTRY"
from "EAG_COUNTRY" "EAG_COUNTRY",
"EAG_CLIENT" "EAG_CLIENT",
"EAG_AREA" "EAG_AREA",
"EAG_AM" "EAG_AM",
"EAG_OPPS" "EAG_OPPS"
where "EAG_OPPS"."O_A_ID"="EAG_AREA"."A_ID"
and "EAG_AM"."AM_ID"(+)="EAG_OPPS"."O_AM_ID"
and "EAG_OPPS"."O_A_CL_ID"="EAG_CLIENT"."CL_ID"
and "EAG_COUNTRY"."C_ID"="EAG_CLIENT"."CL_CNTRY_ID"

Best regards


Tobias

Arnold Meenhorst 01 March, 2010 15:55

Hi Tobias,

I read the http://www.velocityreviews.com/forums/t163666-firefox-ignores-the-style-width-attribute-in-the-span-tag.html document and tried the float solution like "float: left; width:500px" in the css style field and that works in firefox.

iulian 19 August, 2011 11:12

thank's a lot!
It's working!!!