APEX-Report - Rotate column heading

KlaBa

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

Scott Wesley

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;
}

Egyed József

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

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

Insert this line into Scott's CSS code:

height: 120px;

Scott Wesley

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;
}

KlaBa

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

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

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.

KlaBa

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

Insert this line into Scott's CSS code:

height: 120px;