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.
Top comments (0)