1 Reply Latest reply: Sep 18, 2013 7:02 AM by Danny*D201 RSS

    Report with scroll bar

      I have created a report with horizontal scroll bar.i am using theme 13. blue gray.i have followed this lin,.scroll has come. report not looking nice. Report data displayed very conjested. how can i improve this. if there is another link for theme 13 blue gray,please send me or is there need for change anything in this link material please tell me.

      OK - I've put together a horizontal scrolling report template for a Theme 12/Standard report: [http://apex.oracle.com/pls/otn/f?p=33642:198]
      To create this, you need to:
      1 - Through Shared Components, Templates - create a new Report Template based on a copy of the existing Standard report template.
      2 - When you have your new template, edit it.
      3 - In the template's "Before Rows" setting, replace what's there with the following:
      <style type="text/css">
      #table1 th {white-space: nowrap}
      #table1 td {white-space: nowrap}
      #table2 th {white-space: nowrap}
      #table2 td {white-space: nowrap}
      <table cellpadding="0" cellspacing="0" summary="" style="padding:0px; border-collapse:collapse;">#TOP_PAGINATION#
          <td style="vertical-align:top; background-color:#EFEFEF; padding:0px; border:1px solid darkgray;">
            <div id="d1" style="background-color:white; margin:0px; border:0px; padding:0px;">
          <td style="vertical-align:top; padding:0px; border:1px solid darkgray;">
            <div id="d2" style="overflow-X:scroll; margin:0px; border:0px; padding:0px; border-right:1px solid darkgray;">
      <table cellpadding="0" border="0" cellspacing="0" summary="" class="t12Standard" id="table2">
      4 - In the template's "After Rows" setting, replace what's there with the following:
      </table><div class="t12bottom">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
      <script type="text/javascript">
      var d1 = document.getElementById("d1");
      var t2 = document.getElementById("table2");
      var t1 = t2.cloneNode(false);
      t1.style.width = "100%";
      t1.id = "table1";
      var t2Rows = t2.rows;
      var k;
      var r;
      var c;
      for (k = 0; k < t2Rows.length; k++)
       r = document.createElement("TR");
       c = t2Rows[k].cells[0].cloneNode(true);
      d1.innerHTML += "";
      5 - On your report's Report Attributes, change the template used for the report from "Standard" to your new one
      6 - Also on the report's Report Attributes, set "Enable Partial Page Refresh" to No - this is required as we need the javascript in the template to be run whenever pagination happens and Partial Page Refresh does not seem to allow us the means to trigger javascript
      7 - Finally, on the report region's Region Footer, add in:
      <style type="text/css">
      #d1 {width:75px;}
      #d2 {width:500px;}
      #d1 refers to the width of the frozen column and #d2 is the width of the rest of the report - you can adjust these figures as required.
      The template contains two DIV tags - d1 and d2. Initially, d1 is empty and d2 contains the report. The javascript moves the first cell in each row from d2 to d1. The styles then add the scrolling functionality.
      Pages: 1 
      Edited by: Vedant on Jun 15, 2011 2:32 AM
        • 1. Re: Report with scroll bar

          since you are using a different theme, replace the "t12Standard" with "t13Standard" in step 3 should make the report look much better.

          in case you upgraded to apex 4.xx now, replace it with "report-standard".


          plus, you can put all the Javascript codes in step 4 into your page. in case you want to reuse the template on multiple pages but have different effects on different pages.


          if this solved your problem, please make it as answered to help others.