VL Web Responsive Menu Bar Right Align
Posted: Tue Nov 07, 2017 3:00 am
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.
Is there any way to pull the menu bar to the far right?
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 4362 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)