Align topbar divs horizontally in Apex 5 UT

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.

topbar_position_vertical
default vertical alignment

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.
 

topbar_position_PD02
region settings

And this is how it looks in the application:

topbar_position_horizontal
horizontal alignment

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.

Advertisements

Apex 5 Universal Theme – Navigation Experiment #1

Task

The idea was to have a left sidebar menu where all the top level menu entries are always open. The reason is to optimize screen estate and avoid clicks when navigating to some sub menu.

Opening the second level menu entry

The following solution is a cheat. It does not really use a list with two different hierarchy levels. Instead it is using a normal side navigation menu. But the entries on the first level (top level entires) are enhanced with attributes, that will make some entries look more important, than other entries.

Here is the css to do so.


div.FlatHierachie-ItemMain{
font-weight:bolder;
font-size: 1.5em;
line-height: 1.5em;
text-shadow: 2px 2px 4px #000000;
}
div.FlatHierachie-Item {
font-weight:lighter;
font-size: 0.75em;
line-height: 1.5em;
}

This css will work only if the list template is changed.

Each entry for a top level menu point will get an additional class:

class="FlatHierachie-Item#A06#"

apex5_sidebar_expand

The following fields need to be changed:

  • List Template Current
  • List Template Current with Sublist Items
  • List Template Noncurrent
  • List Template Noncurrent with Sublist Items

The Sublist entries will stay as they were.

Additionally the Navigation list itself needs to be changed.

Each top level list entry will get an additional attribute number 06 set to “Main”.

apex5_sidebar_expand_navlist

All second level list entries will get there parent entry removed.
To remain the ordering of the list, it is advisable to RESEQUENCE the list entries first, before removing the parent information.

This is the most manual work to do. Also it is not so easy to get back to the old list, therefore we should first make a copy .

And this is how the result looks like:

apex5_sidebar_expand_after

Overview about other Experiments

APEX 5 Universal Theme – Analyzing and Modifing Navigation Menus

Preparation

I’m currently analyzing a lot of the navigation menu possibilities of the universal theme. The goal is to find ways to enhance the current navigation possibilities in various way. I’m not a webdesigner. I do understand a fair bit of HTML5 and CSS3, but I’m far from an expert there. But this is why I like Apex. In general we do not need to have an extensive design wisdom. My personal strength is on the database level. However I feel that especially with APEX5 it becomes even more useful to understand CSS.

Information gathering

Unfortunatly there is not much information available from oracle. Patrick Wolf made a nice list of Apex Blog entries. However most of them do show only how apex 5 behaves normally. Not like you can break out of the norm. Fortunatly the list gets longer and longer, so you might want to recheck it from time to time.

One should be used to analyze the html code using tools like code inspector and firebug.

Or you can “read” the css and js files. I did this a few times, just to see if I can find some more hidden options or reusable css classes.

John Synder blogged about the different widgets that are used in the page designer: http://hardlikesoftware.com/weblog/2015/04/29/apex-5-0-page-designer-meet-the-widgets/

How to test drive new layout settings

There are a couple of things I regularily do when experimenting with layouts, especially with the menu.

Since I’m usually not the only developer in a project, I do not want to confuse or disturb the others. Therefore some reasonable precautions seem necessary.

  1. Copy the whole application into the same workspace
  2. When playing around with the theme roller, create a new style and save that.

If you have static files set up, then you can directy use the result from the theme roller in the application copy and later in the original application. If not, then you can download and store the resulting css manually and reference it.

Experiments

#1 Trying to keep the first two menu hierachy levels open

The goal was to reduce the number of clicks for the users. One idea was to keep the first two levels in the menu hierarchy always open.

Different approaches tried :

  1. set the autocollapsible option for the navigation tree to false
    ==> No success so far
    The autocollapsible option is a default option for the tree widget. Not sure if I correctly used that, but changing it to false seemed to have no effect.
  2. use the class a-TreeView–noCollapse
    ==> No success so far
    This class should be considered during tree initialisation and by the expand/collapse events. I could add the class using a modified list template for the top level list entries, but that was not working.
  3. make second level hierachy entries look like top level entries
    ==> Seems possible with large changes to the list template and by adding some additional attributes.
  4. make all second level entries to top level entries and add an attribute to change the look like second level entries
    ==> this is the only one I sucessfully implemented. Not my favourite solution, but only 2 hours of work.
    Here is a blog entry to show the steps how to do it.

#2 Trying to create a “Windows Startmenu” like navigation

The idea is to have a menu on the left hand side, where the sub menu entries open simliar to the windows start menu (if you still remember that you metro users!). One problem is to have the sub menus overlap the normal page body. This is solved for the top menu bar widget, but not so easily done with the side bar tree widget.

Different approaches possible:

  1. Use the top menu logic for the side.
    ==> This is tricky, but I got some mediocre “in between” results.
    So far the additional work to do is more time than I wanted to spent. So I stopped the experiment. Might want to come back to that one day.
  2. Using Twitter Bootstrap directly to circumvent the whole apex internal logic.
    ==> This is definitly possible. I did the same with a Topbar Menu in Apex 4.2 . I think there is even a plugin from Dan McGhan that does it. However with the new apex 5 possibilities, this is not my preferred way.

#3 Decreasing the size of the sidebar menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Here is how to decrease the line height for the side menu: https://svenweller.wordpress.com/2015/09/24/apex-5-universal-theme-navigation-experiment-3/

#4 Coloring the Menu

The idea is to enhance the side bar menu by having different regions colored differently. This works but I discovered a few quirks during the process of doing so.

This is the result

apex5_sidebar_colored_after

And here is how to do it: https://svenweller.wordpress.com/2015/11/05/apex-5-universal-theme-navigation-experiment-4/

 

Apex 5 Universal Theme – Navigation Experiment #3

Decreasing the size of the side navigation menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Especially after applying the “keep two menu” hierarchies open change (i blog about that later), I decided to play a bit with the theme roller settings and try decrease the height for each menu entry.

Here is the result. if you add the following css to your theme, the height of the typical menu item will decrease from 40px to 30px.


.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-row,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-content .fa {
height: 30px;
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label {
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle {
padding: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .fa {
padding: 0px 9px 8px 13px;
}

.t-TreeNav .a-TreeView-node--topLevel > ul > .a-TreeView-node {
padding-left: 32px; padding-top: 0px; padding-bottom: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content {
line-height: 0px;
}

Don’t get hilarious by the nice green color. This was just me experimenting. The css will not change your color settings.

before/after: apex5_sidebar_decrease_beforeapex5_sidebar_decrease_after

As you can see the total size decreases considerably while maintaining font sizes.

I did only change the top level entries, since they take up the most space. The sub level entries where just alined a little bit to the right. So that they match their main entries better. This depends also upon having icons or not in the sub entry.

One place where you can add the css is the custom section of the theme roller.

apex5_sidebar_decrease_TR  Simply copy and paste it there and see the change immediatly in your application.

Overview about other Experiments