Wednesday 29 January 2014

column width in an APEX report


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:
  1. SELECT '<b><div style="width: 150px; text-align: left">Employee no.: ' || "EMP"."EMPNO" ||  
  2.        '</div></b>' as "EMPNO",  
  3.        '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||  
  4.        "EMP"."ENAME" || '</div>' as "ENAME",  
  5.        '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||  
  6.        "EMP"."HIREDATE" || '</div>' as "HIREDATE",  
  7.        '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||  
  8.        "EMP"."SAL" || '</div>' as "SAL",  
  9.        '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||  
  10.        "EMP"."COMM" || '</div>' as "COMM"  
  11.   FROM "EMP"  
  12. -- </div> - div tag is needed to create the css style attributes  
  13. -- "width: 150px;" - for column width  
  14. -- "text-align: left" - for text alignment  
  15. -- "background-color: rgb(225, 225, 225)" - for column background color  
  16. -- "border: 1px solid rgb(204, 204, 204)" - for border color  
  17. -- "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. :)

No comments:

Post a Comment