Using the 12 column grid in Apex 5, we can easily position regions (=divs) as we want.
Unfortunately this is not possible in the title bar where the breadcrumbs reside. There simply is no column grid in the breadcrumb bar. But sometimes it is useful to add some regions or DIVs there.
Here is an example how two regions look that are added to the breadcrumb bar.
They are always aligned one below the other. To use the space available we often want to stack the divs beside each other.
A tiny little bit of css can change this alignment. Add this on page level to the css section.
.syn-app--topbarcontainer, div#R_TOPBAR {
border-spacing: 2px 2px;
border: 0px solid;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
};
The main trick here is to use a flex display with direction row. This will try to align all child divs in a horizontal row.
More infos about flex property: http://www.w3schools.com/cssref/css3_pr_flex-direction.asp
The css class “syn-app–topbarcontainer” then needs to be applied to a parent region. This region should have the “Blank with Attributes” template (Apex 5.1).
Alternatively the region can use R_TOPBAR as a region alias.
The two Regions A and B are subregions. The subregions can be used with any template. The example uses the standard template with some minified settings.
And this is how it looks in the application:
This works in Apex 5.0 and also in Apex 5.1 (early adopter).
Be aware that this is not a responsive layout. So when the browser window size is lessened, then the regions will not position below each other.
svenweller 