Skip to Main Content
Posted on

APEX 4.2 resizable interactive report column heading menu

Category APEX Tips and Tricks

I have previously write post Resizing interactive report column dropdown list that did work also for APEX 3.2.

Here is more simple solution that works on APEX 4.2.

First create page where is interactive report. Edit page attributes and add to page CSS inline

#apexir_rollover.ui-resizable {
 padding-right: 8px;
}
#apexir_rollover div.ui-resizable-handle {
 background: url("#IMAGE_PREFIX#qb/close.png") no-repeat scroll 0 50% #F0F0F0;
 border-left: 2px solid #F0F0F0;
 right: 0;
}

Then create dynamic action

  • Name: Set resizable ir column heading menu
  • Event: Page load
  • Condition: -No Condition-
  • Action: Execute JavaScript code
  • Code: 
    this.affectedElements.resizable({
 minWidth:200,
 handles:"e",
 stop:function(){$(this).css({"height":""})}
});
  • Selection Type: jQuery Selector
  • jQuery Selector: #apexir_rollover

Now when you run page and click interactive column heading you can resize menu.

See working example.

Resizable interactive report column menu

Comments

  • Jari Laine 12 Oct 2017

    Hi Christian,

    You can set width using CSS.

    .a-IRR-sortWidget.ui-resizable {
    width: 400px;
}

    Regards,
    Jari

  • Christian 12 Oct 2017

    Thank you! it works perfecty

    Do you also know how to set a default width?

    For example 400px

    kind regards

    Christian

  • Jari Laine 10 Oct 2017

    Hi christian,

    What I quickly check, you need change dynamic action jQuery selector to .a-IRR-sortWidget and CSS as below

    .a-IRR-sortWidget.ui-resizable {
    padding-right: 8px;
}
.a-IRR-sortWidget div.ui-resizable-handle {
    background: url("#IMAGE_PREFIX#qb/close.png") no-repeat scroll 0 50% #F0F0F0;
    border-left: 2px solid #F0F0F0;
    right: 0;
}

    I hope this helps.

    Regards,
    Jari

  • Christian 10 Oct 2017

    Hi,

    is there a way to do that in Apex 5.x ??

    thanks.

    kind regards

    christian

  • Jari Laine 5 May 2014

    Hi senthil,

    I'm not quite understand what you mean.
    Could you please create example to apex.oracle.com and give detailed instructions how reproduce problem.

    Regards,
    Jari

  • senthil 5 May 2014

    Thanks for your post, when we have more number of columns on the IR, drop down list is always showing on the right side because the users are moving the from right side to left side due to more number of columns. hope this will be solved by adjusting the css, please guide the same.

    Have a great day