How to Vary the width of Interactive Report Column in Oracle Apex 5

Question

I have one simple Interactive report build in Apex 5.0. Its just simple plain statement pulling the data from table.

I need to adjust the size of each column in the so that data properly appears in the report.

Right now what is happening is that i have column called customer which contains customer name. Now name is 30 to 40 characters long and in the report it is getting broken down in two lines.

I tried using the following but there is no effect of this. Could you please help me to fix this. I have 30 columns in the report.

#apexir_NAME{width: 200px;}

Solution 1

To change interactive column width:

1. Add static id to interactive report eg. myReport
2. Add static id for column in report eg. myColumn1
3. Add to inline css of page below code:

myReport td[headers=myColumn1]{ width:100px; }

Note: before myReport td put #

Solution 2

You should try this using Column Formatting and set HTML Expression value like this

<div style="display:block; width:200px">#COLUMN_NAME_OF_REPORT#</div>

Solution 3

Use min-width instead. You could use either of the following:

#apexir_NAME {min-width:200px;}

or

th#NAME {min-width:200px;}

To set all of them at once, you could try something like this:

table.apexir_WORKSHEET_DATA th {min-width:200px;}

Comments

[Raj]

Thanks for your reply. Do i need to set this at page level or region level?

[Jeffrey Kemp]

If you are on Apex 5.0 and you have more than one IR on the page I'd say you'd have to change the css selector - defining it in the region won't make a difference.

[Raj]

I tried all the of the option but it didn't work. I tried putting in the pages header also region header but there is no impact.

[Jeffrey Kemp]

Probably means you haven't picked the right css selector for your theme. I find using Chrome or Firefox's element inspector the best way to diagnose this sort of issue. Alternatively, put a sample of your app on apex.oracle.com and we can have a look.