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

Oracle Apex 5.0.* right side column width

isabolic99 profile image isabolic99 Updated on ・1 min read

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

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

Posted on by:

isabolic99 profile

isabolic99

@isabolic99

The lover of javascript, good coffee and cycling.

Discussion

markdown guide