VL Web Responsive Menu Bar Right Align

[jyoung]

Working on a responsive menu for a new VL Web App.
All the samples in the docs seem to use the MENU BAR component and it works out ok, but I cannot figure out how to get the menu bar to be aligned to the right.

The menu bar is in a Row(1) Column(2) Center Right, Flow Right Layout. The Menu Items are Center Aligned with varying widths.

menu.PNG (3.18 KiB) Viewed 4363 times

Code: Select all

* ================================================================================
* LAYOUT
* ================================================================================
define_com class(#PRIM_TBLO) name(#Layout1)
define_com class(#PRIM_TBLO.Column) name(#Column1) displayposition(2) parent(#Layout1)
define_com class(#PRIM_TBLO.Row) name(#LayoutRow1) displayposition(1) parent(#Layout1)
define_com class(#PRIM_TBLO.Column) name(#LayoutColumn1) displayposition(1) parent(#Layout1) units(Content) width(80)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem1) alignment(CenterLeft) column(#LayoutColumn1) manage(#PageTitle) parent(#Layout1) row(#LayoutRow1) sizing(ContentWidthFitToHeight) flow(Right)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem2) alignment(CenterRight) column(#Column1) manage(#MenuBar) parent(#Layout1) row(#LayoutRow1) flow(Right)

* ================================================================================
* UI COMPONENTS
* ================================================================================

define_com class(#PRIM_LABL) name(#PageTitle) caption('[Page Title]') displayposition(1) ellipses(Word) height(49) parent(#COM_OWNER) tabposition(1) tabstop(False) top(0) verticalalignment(Center) componenttag('PTOREQP01') themedrawstyle('NavBarItem') width(60) left(0)
define_com class(#PRIM_PPNL.MenuBar) name(#MenuBar) displayposition(2) left(60) parent(#COM_OWNER) tabposition(2) tabstop(False) width(540) height(49) collapsestyle(All)
define_com class(#PRIM_PPNL.MenuItem) name(#MenuItem1) caption('My Requests') displayposition(1) height(49) parent(#MenuBar) tabposition(1) tabstop(False) alignment(Center) width(140)
define_com class(#PRIM_PPNL.MenuItem) name(#MenuItem2) caption('Direct Reports') displayposition(2) height(49) left(140) parent(#MenuBar) tabposition(2) tabstop(False) alignment(Center) width(140)
define_com class(#PRIM_PPNL.MenuItem) name(#MenuItem3) caption('Department') displayposition(3) height(49) left(280) parent(#MenuBar) tabposition(3) tabstop(False) alignment(Center) width(120)
define_com class(#PRIM_PPNL.MenuItem) name(#MenuItem4) caption('Admin') displayposition(4) height(49) parent(#MenuBar) tabposition(4) tabstop(False) left(400) alignment(Center) width(120)

Is there any way to pull the menu bar to the far right?

[atostaine]

Can you put a label under the menu that is the same color and make it take up the whole row? Then set the menu to center right?

Here is how it looks.

vlf.jpg (17.4 KiB) Viewed 4340 times

[jyoung]

I ended up making my own as I could not get the main menu bar (not the collapsed menu) to be right aligned as in "Admin" to the far right.

I was trying to get to something like this with the Menu Bar.

menu.png (4.37 KiB) Viewed 4335 times

After some initial difficultly with the animation, it works out quite well.