Monday 18 September 2017

Interactive Reports: Button Positions

When we add any buttons to IR and select button position as "Right of Interactive Report Search Bar" we notice that the buttons gets displayed in right corner of the report. Looks something like below  image:


There is no pre-defined option within APEX to move these buttons to other positions. This can be achieved by using some custom CSS.

For example, If I want to align buttons right next to Action Menu in Interactive Report then I can use the below CSS:

.a-IRR-toolbar {
  display: flex;
}

.a-IRR-buttons {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
}

Use the above code in the CSS inline section of the page. Result would be something like the image below:


Here is the link to the DEMO application: https://apex.oracle.com/pls/apex/f?p=110214:3
UserName/Password: demo/demo

You can play with different values of justify-content property to make the buttons display in different positions. It can take below mentioned values:
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Below are the details for each property values.
flex-start > Default value. Items are positioned at the beginning of the container
flex-end > Items are positioned at the end of the container
center > Items are positioned at the center of the container
space-between > Items are positioned with space between the lines
space-around > Items are positioned with space before, between, and after the lines
initial > Sets this property to its default value.
inherit > Inherits this property from its parent element.

Hope this helps.

Cheers,
Prashanth


Universal Theme - Side Navigation Menu Child Entry Icon Alignment

Hi, There is an issue with the Side Navigation Menu Child Entry Icon Alignment in Universal theme if you are using APEX 5.1 or prior vers...