VL-web layout mobile (SOLVED)

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

VL-web layout mobile (SOLVED)

Post by kno_dk » Fri Jul 19, 2019 10:56 pm

Hi.

is it possible to hide the url address line at the top and the navigation line at the bottom in the browser on a mobile phone from a VL-WEB application?

/Klaus

MarkD
Posts: 605
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD » Mon Jul 22, 2019 9:13 am

What happens if you make the URL a launchable shortcut from the phone's home screen?

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Mon Jul 22, 2019 6:35 pm

Hi.

Then the url and the navigation bar is gone - thanks.

My application is with 3 rows. Top, Main and Bottom. I would like that the top and bottom row is fixed. Right now It starts to fille the entire screen just as I want it to, but it is possible to slide that application up and down on the screen. Can I avoid that?

/Klaus

JamesDuignan
Posts: 56
Joined: Thu Nov 26, 2015 1:43 pm

Re: VL-web layout mobile

Post by JamesDuignan » Tue Jul 23, 2019 4:51 pm

Hi Claus,

if you are using a table layout on your webpage make the top and bottom rows units to be pixels and the content area to be proportion.

for example:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')

Evtroutine Handling(#Com_owner.Initialize)

Endroutine

End_Com
Regards,
James

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Tue Jul 23, 2019 10:32 pm

Hi James.

If I create your example and then added it to the homescreen on the iphone it will act the same way as my application. You are able to move the entire application up and down by swipping up and down with your finger.

I want the top and bottom bar to be fixed at all time in the top and in the bottom.

/Klaus

MarkD
Posts: 605
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD » Wed Jul 24, 2019 9:32 am

In you web form's definition what is this option set to?
Capture.PNG
Capture.PNG (7.13 KiB) Viewed 141 times
If yes, try setting it to no and recompile.

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Wed Jul 24, 2019 5:13 pm

Hi.

The allow zoom was yes and I have changed it to no. It did not help. The problem is only on my Iphone. On an android it works as it should.

Here is my test web page.

I have a small issue more. I have a order web application where
I want the top and bottom bar to be fixes and everything in the middel to be dynamic and be able to scroll. In this application I have a list,and there should be some information at the top and at the bottom. If I scroll it should be the entire middel section (#PanelMidt) not only in the list. I have tried a lot of things but I can not get it to scroll the way I want.

What am I missing?


Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

MarkD
Posts: 605
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD » Thu Jul 25, 2019 3:36 pm

I know this is a VLF guide, but VLF applications are just VL-Web applications.

https://docs.lansa.com/14/en/lansa048/i ... 8_8315.htm

Does doing that alter the behavior?

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Thu Jul 25, 2019 4:36 pm

Hi.

If i remove these 2 lines i get the statusbar and navigation - even on the shortcust from the homescreen. and that i dont want. I want to get rid of them.

/klaus

User avatar
MarcusLancaster
Posts: 22
Joined: Tue Nov 24, 2015 9:20 pm

Re: VL-web layout mobile

Post by MarcusLancaster » Thu Jul 25, 2019 6:55 pm

Hi Klaus

Is this version of your program closer to what you need to see?

Cheers for now.

Marcus.

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem2) Manage(#Label1) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Sizing(ContentHeightFitToWidth) Column(#LayoutColumn2) Alignment(TopLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')

Define_Com Class(#prim_PANL) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Layoutmanager(#LayoutGroupboxMidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(2) Layoutmanager(#LayoutList) Left(0) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1200) Parent(#GroupBoxMidt)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1166)
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Label1') Displayposition(1) Ellipses(Word) Height(17) Left(0) Parent(#GroupBoxMidt) Tabposition(2) Tabstop(False) Top(0) Verticalalignment(Center) Width(1200)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#label1.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#label1.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Thu Jul 25, 2019 7:39 pm

Hi.
No. I have created in a different way where i calculate the heigt of the panel based on the number of entries in the list. I dont know if this is the only way to do it.
Here is the source:
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#LayoutRow2.MinHeight := 48
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height #List.Height #LayoutRow2.MinHeight += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

User avatar
MarcusLancaster
Posts: 22
Joined: Tue Nov 24, 2015 9:20 pm

Re: VL-web layout mobile

Post by MarcusLancaster » Thu Jul 25, 2019 7:51 pm

Ah ha - you want groupbox top and groupbox bottom to scroll up/down too. Got it. Sorry misunderstood the requirement :-(

Try this... no calculations... just using layout managers...

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Width(1200) Caption('GRPBOX top') Height(75)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt) Height(216)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(291) Width(1200) Caption('GRPBOX Bottom') Height(80)
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
Endroutine

Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
Endroutine

End_Com

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk » Thu Jul 25, 2019 8:49 pm

Thanks.

it worked.

/klaus

Post Reply