Forum Stats

  • 3,817,360 Users
  • 2,259,322 Discussions
  • 7,893,760 Comments

Discussions

APEX-Report - Rotate column heading

KlaBa
KlaBa Member Posts: 61 Red Ribbon
edited Apr 29, 2021 5:46AM in APEX Discussions

I have a report with a lot of columns.

The length of the data is not very large, but the column heading prevents me from making the columns narrower.

Is it possible to rotate the text in the column header by 90 °?


Kindly regards

Klaus

Tagged:

Best Answers

  • Scott Wesley
    Scott Wesley Member Posts: 6,188 Gold Crown
    Answer ✓

    This sounds like a CSS problem.

    eg, where my classic report has static region ID of "empr"

    #empr .t-Report-colHead {
      transform: rotate(-90deg);
      vertical-align: inherit;
    }
    


    Awais Majeedmohamed azab
  • Egyed József
    Egyed József Member Posts: 58 Bronze Badge
    Answer ✓

    Hi Klaus!

    By default, the report region does not have a region ID.

    You have to enter it as follows.

    In the Application Builder page editor, click the region name in the Component Tree on the left.

    Locate the Static ID property at the bottom right of the page.

    Enter the value (MyRegionID).

    In the CSS code, replace the text #empr with the text #MyRegionID.

    Copy the modified text to the location below.

    In the Application Builder page editor, click the page name at the top of the Component Tree on the left.

    Find the Inline property of the CSS section at the bottom right of the page. Copy the modified CSS code here.

    Run the page.

    Don’t be scared if you don’t see the same image that Scott inserted into your solution, because the look depends on whether you have set a Theme Style for your application.

    Scott Wesley
  • Scott Wesley
    Scott Wesley Member Posts: 6,188 Gold Crown

    The other thing is that I used classic report as the simple example because it most closely resembles standard HTML.

    Rotating IR columns will possibly induce other interesting UI since they have their own behaviours - when you click on the heading.

    All regions get allocated an ID based on the internal ID used within APEX' metadata. The Static ID attribute allows you to specific what that ID is. Get familiar with it, because you'll use it frequently, for targeting CSS like this, or targeting dynamic actions that use a jQuery selector.

    Just take care when you duplicate objects that you remember to change the Static ID. Having duplicate Static IDs on one page will usually result in unexpected/unwanted behaviour.

    Egyed József
  • Egyed József
    Egyed József Member Posts: 58 Bronze Badge
    Answer ✓

    Insert this line into Scott's CSS code:

    height: 120px;

    KlaBa

Answers

  • Scott Wesley
    Scott Wesley Member Posts: 6,188 Gold Crown
    Answer ✓

    This sounds like a CSS problem.

    eg, where my classic report has static region ID of "empr"

    #empr .t-Report-colHead {
      transform: rotate(-90deg);
      vertical-align: inherit;
    }
    


    Awais Majeedmohamed azab
  • KlaBa
    KlaBa Member Posts: 61 Red Ribbon

    Hi Scott,

    many thanks for your answer 👍️👍️

    But I need your help again.

    It is the first time for me, that I have to determine a "STATIC ID" for an interactive report.

    How do I find this, or do I have to specify it myself?

    If "yes", where do I have to enter it?

    Kindly regards

    Klaus

  • Egyed József
    Egyed József Member Posts: 58 Bronze Badge
    Answer ✓

    Hi Klaus!

    By default, the report region does not have a region ID.

    You have to enter it as follows.

    In the Application Builder page editor, click the region name in the Component Tree on the left.

    Locate the Static ID property at the bottom right of the page.

    Enter the value (MyRegionID).

    In the CSS code, replace the text #empr with the text #MyRegionID.

    Copy the modified text to the location below.

    In the Application Builder page editor, click the page name at the top of the Component Tree on the left.

    Find the Inline property of the CSS section at the bottom right of the page. Copy the modified CSS code here.

    Run the page.

    Don’t be scared if you don’t see the same image that Scott inserted into your solution, because the look depends on whether you have set a Theme Style for your application.

    Scott Wesley
  • Scott Wesley
    Scott Wesley Member Posts: 6,188 Gold Crown

    The other thing is that I used classic report as the simple example because it most closely resembles standard HTML.

    Rotating IR columns will possibly induce other interesting UI since they have their own behaviours - when you click on the heading.

    All regions get allocated an ID based on the internal ID used within APEX' metadata. The Static ID attribute allows you to specific what that ID is. Get familiar with it, because you'll use it frequently, for targeting CSS like this, or targeting dynamic actions that use a jQuery selector.

    Just take care when you duplicate objects that you remember to change the Static ID. Having duplicate Static IDs on one page will usually result in unexpected/unwanted behaviour.

    Egyed József
  • KlaBa
    KlaBa Member Posts: 61 Red Ribbon

    Super, super, super!!

    100 times Thanks to all helpers.

    My problem is as good as solved!

    Can someone tell me, how I can increase the height of the header column, since the vertical column headings now partially cover the values in the result lines?

    I'm really happy ☺️ that I got such professional help here.

    Kindly regards

    Klaus

  • Egyed József
    Egyed József Member Posts: 58 Bronze Badge
    Answer ✓

    Insert this line into Scott's CSS code:

    height: 120px;

    KlaBa