DEV Community

Cover image for Oracle Apex 5.0.* right side column width
isabolic99
isabolic99

Posted on • Edited on

2 2

Oracle Apex 5.0.* right side column width

Apex 5.* comes with universal theme that includes page template called
Right Side Column.
This template provides a collapsible right-side display position that is useful for displaying action-oriented controls such as buttons or lists.
Now this region position is limiting my region to 200px width. That was too thin for me.
So I tried to expand this with css and I found that toggling "open" and "close" are not based on any javascript function. Instead a css property transform is used: translate3d(200px, 0, 0);.

Specification for this css rule can be found here: https://goo.gl/5qnxqJ

This css rule is applied on button click and css selector is doing the rest.
That means when user clicks on button to expand the region, class .js-rightExpanded is set on body. When user clicks on close then that class is replaced with .js-rightCollapsed.

The solution for my problem was to set css on page:

body.t-PageBody.js-rightCollapsed .t-Body-actions {
    -webkit-transform: translate3d(300px, 0, 0);
    -ms-transform: translate(300px);
    transform: translate3d(300px, 0, 0);
}

.t-Body .t-Body-actions {
    width: 300px;
}
Enter fullscreen mode Exit fullscreen mode

Apex example can be found here: https://goo.gl/7sboEj

NOTE
If you use APEX 5.1 and up you can use option called "Actions Column" in the new version of apex (>5.1) inside Theme Roller.

https://twitter.com/isabolic99/status/974537323084828672

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay